각도 2 - BehaviorSubject with Loop를 만드는 서비스

Question

클릭 가능한 차트가 포함 된 중첩 된 구성 요소가 있으며 선택 가능한 세 개의 섹션이 있으며 그 중 하나 인 md-tab-group의 selectedIndex를 설정합니다. 첫 번째 탭으로 이동하고 두 번째 탭은 두 번째 탭으로, 세 번째 탭은 세 번째 탭으로 이동합니다.

문제는 내가 사용하고있는 서비스가 일종의 루프를 만드는 것 같습니다. 내가 서비스를하는 단계를 콘솔로 할 때마다 점점 더 커지고 있습니다.

관련 서비스 코드 :

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 's에 대해 꽤 새로운데, 내가 잘못 가고있는 어떤 아이디어가 있니?

(즉 어떤 도움이된다면 내가 사용하는 내 예 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); 
    } 
    } 

Answer 1

당신 말이 맞아요. changeActiveTab은 모든 통화에 대해 더 많은 구독을 만듭니다. 서비스에서 구독을해서는 안됩니다. 서비스에는 두 가지 방법이 있어야합니다. 1. setTab - 관련 매개 변수로 subject.next를 호출합니다. 2 register - 해당 주체의 관찰 가능 항목을 반환합니다.

exmaple : 내 구성 요소의

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