订阅BehaviorSubject

Question

我在BehaviorSubject的工作中遇到了一些困难。

在我的应用程序中，我有一个带有3个选项卡的横幅，您可以选择。每一个都会显示不同的内容。

因此，对于在选项卡选择的其他组件中，我决定使用BehaviorSubject，理论上这将更新tabSelected的值。

因此，在我的横幅组件中，我有：

component.html:

<div *ngFor="let tab of tabs">
        <div class="tab btn-tab" (click)="setTabSelected(tab)">
        </div>
</div>

component.ts

ngOnInit() {
    this.setTabSelected(this.tabs[0]);
}
setTabSelected(tab) {
    this.shareDataSv.sendTab(tab);
}

在我的中介服务中：

private tabSubject = new BehaviorSubject(new TabsValues());
tab$ = this.tabSubject.asObservable();

sendTab(tab: TabsValues) {
    console.log('Send tab', tab);
    this.tabSubject.next(tab);
}

在将接收所选选项卡的组件中：

reciver.component.ts

ngOnInit() {
    this.knowSelectedTab();
}

knowSelectedTab() {
    this.shareDataSv.tab$.subscribe(data => this.tab = data);
    console.log('Selected tab', this.tab);
}

因此，在开始时，我完美地获得了预定义选项卡的值。但是，当我单击其他选项卡时，我在发送新值的服务中看到，但在订阅中没有获得任何数据。

我在这里留下一个例子：stackblitz示例

有什么线索吗？谢谢!

P.D.：如果我为knowSelectedTab()使用一个间隔，我就能够看到这些变化。

Answer 1

您立即取消订阅，因此订阅就在那里结束。您应该取消订阅可观察到的内容，但是要在OnDestroy中这样做。因此，删除取消订阅：

knowTab() {
  this.subscription = this.shareDataSv.tab$.subscribe(data => {
    if (data) {
      this.tab = data;
      console.log('Obatined data',this.tab);
    }
  });
  // remove this!
  // this.subscription.unsubscribe();
}

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

你的叉子STACKBLITZ