Question

我有一个嵌套组件，其中包含一个可点击的图表，其中包含三个可选择的部分，它们将设置它所在的md-tab组的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很新，我对哪里出错了？

（我使用的例子来自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注册 - 返回该主题的可观察性。

〔实施例：

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

Angular 2 - 使用BehaviorSubject创建循环

1 个答案: