Angular 2 - Service mit BehaviorSubject Erstellen einer Schleife

Question

Ich habe eine verschachtelte Komponente, die ein anklickbares Diagramm mit drei auswählbaren Abschnitten enthält, die den selectedIndex der md-tab-Gruppe, in der es sich befindet, festlegen. Ich klicke auf das erste, I Gehe zum ersten Tab, der zweite führt zum zweiten und drittens zum dritten Tab, ziemlich einfach.

Das Problem ist, dass der Dienst, den ich benutze, eine Art Schleife zu erstellen scheint. Wenn ich die Schritte trete, die der Service macht, sehe ich, dass er jedes Mal größer wird.

Relevante Servicecode:

changeActiveTab(number) { 
    console.log("Before: "); 
    this._activeTab.subscribe(val => console.log(val)); 
    this._activeTab.next(number); 
    console.log("After"); 
    this._activeTab.subscribe(val => console.log(val)); 
    } 

Was ich sehe, wenn ich auf dem ersten Abschnitt klicken, navigieren Sie zurück auf die Tabelle mit dem Haupt nav, und wiederholen Sie den Vorgang noch zwei Mal: ​​

Before: 
0 
1 
After 
1 
Before: 
1 
2 
2 
2 
After: 
2 
Before: 
2 
3 
3 
3 
3 
3 
3 
After 
3 

Ich bin ziemlich neu in BehaviorSubject, irgendwelche Ideen, wo ich falsch liege?

(Mein Beispiel, das ich verwendet wurde von here wenn das jeder hilft) Komponente

Relevante Code für Eltern:

selectedTab: number; 
    subscription:Subscription; 
    constructor(private _activeTabService: ActiveTabService) { } 

    ngOnInit() { 
    this.subscription = this._activeTabService.activeTab$.subscribe(
     selectedTab => this.selectedTab = selectedTab); 
    } 

    ngOnDestroy(){ 
    this.subscription.unsubscribe(); 
    } 

Relevante Diagramm TS für das Kind Komponente:

onClick(event){ 
    if(event.series == 'Table'){ 
     this.changeActiveTab(1); 
    } 
    if(event.series == 'Chairs'){ 
     this.changeActiveTab(2); 
    }   
    if(event.series == 'Desks'){ 
     this.changeActiveTab(3); 
    } 
    } 

Answer 1

Du hast recht. changeActiveTab erstellt bei jedem Anruf mehr und mehr Abonnements. der Dienst sollte das Abonnement nicht machen. Der Dienst sollte zwei Methoden haben. 1. setTab - ruft subject.next mit dem entsprechenden Parameter auf. 2 Register - gibt eine Observable dieses Subjekts zurück.

exmaple:

export class tabService { 
subject = new Subject(); 
setTab(value: string) 
    this.subject.next(value); 
} 

registerTab(){ 
return this.subject.asObservable(); 
} 

in meiner Komponente:

myfunction(){ 
    this.tabService.registerTab().subscribe(
    (res) => do what you want with this value.... 
); 

changeTab(value: string) 
{ 
    this.tabService.setTab(value); 
}