Javascript Angular 2-使用BehaviorSubject创建循环的服务

我有一个嵌套组件，它包含一个可单击的图表，其中有三个可选部分，用于设置它所在的md选项卡组的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

我对行为学是个新手，你知道我哪里出了问题吗

（我使用的例子来自于《如果有帮助的话》）

父组件的相关代码：

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

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

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

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

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

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

子组件的相关图表TS：

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

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

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

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

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

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

你说得对。 changeActiveTab确实会在每次通话中创建越来越多的订阅。 服务不应进行订阅。 该服务应该有两种方法。 1.setTab-将使用相关参数调用subject.next。 2寄存器-返回该对象的可观察值

exmaple：

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

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

在我的组件中：

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

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

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

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

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

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

---

谢谢您的确认！你能解释一下这是什么样子吗？如果我设置选项卡并返回它，它与我现在看到的不一样吗？我添加了一个简单的示例在示例中使用Behavior Subject，而您在这里使用Subject，这有关系吗？那么我的onClick函数看起来会是这样的：

onClick（event）{this.tabService.registerTab（）.subscribe（（res）=>{if（event.series='Table'）{this.changeActiveTab（1）；}if（event.series='Chairs'）{this.changeActiveTab（2）；}if（event.series='Desks'）{this.changeActiveTab（3）；}}

我不确定您是否需要行为主题，但这取决于您，实现保持不变。