Question

我正在解决一个我目前无法解决的问题。
事情是。我有一个名为HeaderComponent的组件，一个名为TabChangingService的服务和另一个名为TabsComponent的组件。在HeaderComponent中，我有三个按钮，每个按钮都具有以下单击方法。

click(tab: number) {
    this.tabChangingService.changeTab(tab);
    this.router.navigate(['/tabs'])
}

并且，在ngOnInit的{{1}}方法中，如下所示：

TabsComponent

在模板中，我有以下代码：

ngOnInit() {
  this.tabChangingService.tab.pipe(
   tap(tab => this.tab = tab),
   tap(tab => console.log('setting tab ', tab) // added this linte
  ).subscribe();
}

该服务的代码如下：

<ng-container [ngSwitch]="tab">
  <div id="tab1" *ngSwitchCase="0">content...</div>
  <div id="tab2" *ngSwitchCase="1">content...</div>
</ng-container>

但是，当我单击标题组件的按钮之一时，未选中该选项卡。仅在第二次单击后，才选择该选项卡。您可能会注意到，tabs组件处于另一条路线中，我不知道这种情况的发生，因为在我第一次单击按钮之类的东西时该组件没有安装，但是希望您能为我提供帮助。预先感谢，非常感谢您的帮助。

编辑
当我第一次单击标题上的一个按钮时，将打印export class TabChangingService { private _tab = new Subject<number>(); constructor() { } public changeTab(tab: number) { console.log('Changing to tab ', tab); // added this line this._tab.next(tab); } public get tab() { return this._tab; } }，但不会打印Changing tab。直到我第二次单击，Setting tab才会被打印。

Answer 1

尝试setTimeout

ngOnInit() {
  this.tabChangingService.tab.pipe(
   tap(tab => {
      setTimeout(()=>{   
        this.tab = tab
      }, 1);
   })
  ).subscribe();
}

只需增加超时时间，以检查是否是组件初始化问题。

Answer 2

在标签更改服务中添加此内容。

private _tab = new Subject<number>();
tabChanged = this._tab.asObservable();

，然后在您的ngOnInit（）中添加它。.

ngOnInit() {
 this.tabChangingService.tabChanged.subscribe(
   // add your code here.
 );

您没有提到这些组件之间是否存在某种关系。但这无关紧要，因为您有服务。您忘记将变量初始化为Observable。

我在代码中展示了我对可观察对象和主题交互的理解。如果我上面写的话不对，请纠正我。

Answer 3

我最终以setTimeout来解决问题，如Sunil建议的那样。但是，setTimeout并未在TabsComponent中使用，而是在发出选定值时在HeaderComponent中使用，如下所示：

click(tab: number) {
 setTimeout(() => {
    this.tabChangingService.changeTab(tab);
   },
   500
 )
 // rest of the code
}

感谢每个人的帮助：D

ngOnInit不订阅可观察的事件

3 个答案:

尝试setTimeout