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();
    }
}

然后在我的标签中我有：

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);
    }
}

在我的产品详情中，我有：

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的答案。目前，虽然我可以通过behaviourSubject正确设置this.showTabs，但仍然没有显示或隐藏选项卡。

观察

因此，经过一番广泛的挖掘后，我得出结论，离子标签是全球行为的罪魁祸首主题/ ngIf似乎没有合作。我使用Ionic提供的侧边菜单模板将它们撕掉并制作了自己的标签。这解决了我的问题，现在标签会动态换出。

Answer 1

我认为你错过了showActionTabs的getter。

无论行为主题被初始化为什么，总是将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);
});

具有全局行为主题的动态标签？

1 个答案: