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

Question

我正在尝试根据您在 Ionic 应用程序中的位置隐藏和显示选项卡。我目前正在尝试使用全局布尔行为主题来实现这一点。为了简洁起见，我有以下代码已被修剪。

在我的提供者/服务 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);
    }
}

在我的 product-details.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>

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

谁能解释我哪里出错了？我对这种方法的理解是，behaviourSubject 从其他类/组件中获取值，然后允许将其应用于其他地方。

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

编辑

我的问题代码已更新以反映@Bhetzie 的答案。目前，尽管 this.showTabs 正在通过 behaviorSubject 正确设置，但据我所知，标签仍然没有显示或隐藏。

结果

所以经过一些广泛的挖掘后，我得出的结论是，离子标签是全局行为的罪魁祸首Subject/ngIf 似乎无法协同工作。我使用 Ionic 提供的侧面菜单模板将它们撕掉并制作了自己的标签。这解决了我的问题，现在选项卡会动态换出。

Answer 1

我认为您缺少 showActionTabs 的吸气剂。

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

你可以试试：

service globals.ts

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

tabs.ts

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