Angular 2 - 使用BehaviorSubject創建循環的服務

我有一個嵌套組件，其中包含一個可點擊的圖表，其中包含三個可選部分，它們將設置它所在的md-tab-group的selectedIndex。我點擊第一個轉到第一個標籤，第二個轉到第二個標籤，第三個標籤，非常簡單。Angular 2 - 使用BehaviorSubject創建循環的服務

問題是我使用的服務似乎在創建某種循環。當我調整服務所採取的步驟時，我發現每次都會變得越來越大。

相關的服務代碼：

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)); 
    }

我看到了什麼，當我點擊第一個部分，導航回到與主導航圖表，兩次重複這個過程：

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

我對BehaviorSubject的新特性很陌生，對於我出錯的地方有任何想法？

（我用我的例子是從here是否可以幫助任何）

父組件

相關代碼：

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

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

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

相關圖表TS的子組件：

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

來源

2017-04-05 gv0000

你是對的。 changeActiveTab確實在每次通話中創建越來越多的訂閱。該服務不應該進行訂閱。服務應該有兩種方法。 1. setTab - 將用相關參數調用subject.next。 2註冊 - 返回該主題的觀察值。

〔實施例：

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

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

在我的組件

：

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

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

來源

2017-04-05 19:54:49 Avi

感謝您確認！你能解釋一下這是什麼樣子？如果我設置了選項卡並返回，那麼它與我現在所擁有的不一樣嗎？ – gv0000

我添加了一個簡單的示例 – Avi

在我的示例中使用BehaviorSubject並且您在此處使用Subject時，是否重要？所以將我的onClick功能看起來像： '的onClick（事件）{ this.tabService.registerTab（）認購（（RES）=> { 如果（event.series == '表'）{ this.changeActiveTab（1）;} 如果（event.series == '椅'）{ this.changeActiveTab（2）;} 如果（event.series == '坐具'）{ this.changeActiveTab（ 3）; } } }' – gv0000

Angular 2 - 使用BehaviorSubject創建循環的服務

回答

相關問題