我正在解决一个我目前无法解决的问题。
事情是。我有一个名为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
才会被打印。
答案 0 :(得分:0)
ngOnInit() {
this.tabChangingService.tab.pipe(
tap(tab => {
setTimeout(()=>{
this.tab = tab
}, 1);
})
).subscribe();
}
只需增加超时时间,以检查是否是组件初始化问题。
答案 1 :(得分:0)
在标签更改服务中添加此内容。
private _tab = new Subject<number>();
tabChanged = this._tab.asObservable();
,然后在您的ngOnInit()中添加它。.
ngOnInit() {
this.tabChangingService.tabChanged.subscribe(
// add your code here.
);
您没有提到这些组件之间是否存在某种关系。但这无关紧要,因为您有服务。您忘记将变量初始化为Observable。
我在代码中展示了我对可观察对象和主题交互的理解。如果我上面写的话不对,请纠正我。
答案 2 :(得分:0)
我最终以setTimeout
来解决问题,如Sunil建议的那样。但是,setTimeout
并未在TabsComponent
中使用,而是在发出选定值时在HeaderComponent
中使用,如下所示:
click(tab: number) {
setTimeout(() => {
this.tabChangingService.changeTab(tab);
},
500
)
// rest of the code
}
感谢每个人的帮助:D