javascript - 具有全局行为主题的动态选项卡？

Question

我正在尝试根据您在 Ionic 应用程序中的位置隐藏和显示选项卡。我目前正在尝试使用全局 bool behaviorSubject 来实现此目的。我有以下代码，为简洁起见已对其进行了 trim 。

在我的提供商/服务 globals.ts 中，我有以下内容:

@Injectable() 
export class AppGlobals {
    public showActionTabs:BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

    setShowActionTabs(val){
        this.showActionTabs.next(val);
    }

    getShowActionTabs(): Observable<boolean>{
        return this.showActionTabs.asObservable();
    }
}

然后在我的 tabs.ts 中我有:

export class TabsPage {
    public showTabs: boolean;

    constructor(private _appGlobals: AppGlobals) {
        this._appGlobals.getShowActionTabs().subscribe((value:boolean) => {                    
            this.showTabs = value;
            console.log("new val: ", value, this.showTabs);
        });
    }

    ngOnInit() {
        setInterval(function() {
            console.log("inside init:", this.showTabs);
        }, 5000);
    }
}

在我的 products.ts 页面中，我有:

export class ProductsPage {

    constructor(private _appGlobals: AppGlobals) {}

    ngOnInit() {
        this._appGlobals.setShowActionTabs(true);
    }
}

在我的产品详细信息.ts 中，我有:

export class ProductDetails {

    constructor(private _appGlobals: AppGlobals) {}

    ngOnInit() {
        this._appGlobals.setShowActionTabs(false);
    }
}

最后在我的 tabs.html 中我有:

<ion-tabs class="side-tabs">
    <ion-tab *ngIf="showTabs" (ionSelect)="toggleSearch()" tabTitle="Search" tabIcon="custom-search"></ion-tab>
    <ng-container *ngFor="let tab of tabs; let i = index; trackBy: trackByFn">
        <ion-tab *ngIf="!tab.hasAction" tabTitle="{{ tab.title }}" tabIcon="{{ tab.icon }}"></ion-tab>
    </ng-container>
    <ion-tab *ngIf="showTabs" (ionSelect)="toggleCompare()" tabTitle="Compare" tabIcon="custom-compare"></ion-tab>
</ion-tabs>

但是，当我在页面之间导航时，选项卡仍然不会相应地隐藏和显示。

有人可以解释一下我哪里出错了吗？我对此方法的理解是，behaviorSubject 从其他类/组件获取值，然后允许将其应用到其他地方。

提前致谢，非常感谢。如果您需要更多详细信息，请询问。

编辑

我的问题代码已更新，以反射(reflect) @Bhetzie 的答案。目前，选项卡仍然没有显示或隐藏，尽管据我所知， this.showTabs 已通过 BehaviourSubject 正确设置。

结果

因此，经过一番广泛的挖掘后，我得出的结论是，ion-tabs 是全局 BehaviourSubject/ngIf 似乎无法协同工作的罪魁祸首。我将它们撕下来，并使用 Ionic 提供的侧面菜单模板制作了自己的选项卡。这解决了我的问题，现在选项卡动态交换。

Answer 1

我认为您缺少 showActionTabs 的 setter/getter 。

它总是将 showTabs 设置为行为主体初始化的任何内容。

你可以尝试:

服务 globals.ts

getShowActionTabs(): Observable<boolean>{
        return this.showActionTabs.asObservable();
    }

tabs.ts

this._appGlobals.getShowActionTabs().subscribe((value:boolean) => { this.showTabs = value;
    console.log(value);
});