BehaviorSubject bleibt auf den ursprünglichen Wert zurückgesetzt

Question

Ich habe ein eckiges 2 Projekt, in dem ich ein paar Komponenten habe. Eine der Komponenten verfolgt ein Mitglied (das zuvor erwähnte BehaviorSubject) mithilfe eines Abonnements.

Der Wert des BehaviorSubjects wird aktualisiert und verschoben, wenn ein Benutzer auf eine Schaltfläche klickt.

Beim Abonnieren wird jedoch nur der ursprüngliche Wert (also 0) ausgegeben.

Die Navbar-Komponente ist der Abonnent, wo in CountService das BehaviorSubject deklariert ist.

Mein CountService:

@Injectable() 
export class CountService { 
    private count:number; 
    public countObservable:BehaviorSubject<number>; 
    public savedItems = { campaigns: [], news: [] }; 

    constructor (private http: Http) { 
     this.count=0; 
     this.countObservable = new BehaviorSubject<number>(this.count); 
     this.countObservable.next(this.count); 
    } 

    keep(keepId: string, type: string){ 
     !!this.savedItems[type].length ? 
      this.savedItems[type].find(i => i == keepId).length ? 
      console.log('exist') : this.keepInSavedItems(keepId, type) 
      this.keepInSavedItems(keepId, type); 
    } 

    keepInSavedItems(keepId, type){ 
     this.savedItems[type].push(keepId); 
     this.count++; 
     this.countObservable.next(this.count); 
    } 
} 

Meine Navbar Komponente:

@Component({ 
    selector: 'navbar', 
    templateUrl: './navbar.component.html', 
    providers: [ CountService ] 
}) 
export class NavigationbarComponent implements OnInit { 
    count:number; 

    constructor(public countService: CountService){ 
    this.count=0; 
    } 

    ngOnInit() : void { 
    this.countService.countObservable.subscribe(count => this.count=count); 
    } 
} 

Answer 1

Sie werden für jeden NavigationbarComponent eine neue Instanz von CountService erhalten, wenn Sie den Service in der Komponente zur Verfügung stellen. Wenn die Komponente vom Router hinzugefügt wird, kann jede Routenänderung die Komponente und den Dienst zerstören und neu erstellen.

Wenn Sie stattdessen den Dienst nur in @NgModule() (nur nicht-lazy-loaded Module) bereitstellen, dann wird es nur eine einzige Instanz für Ihre gesamte Anwendung geben.

Answer 2

Wahrscheinlich passiert das wegen providers Array in einzelnen Komponenten verwendet.

provides:[CountService] aus einzelnen Komponenten entfernen und erklären, es in rootcomponent's @NgModule