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

我试图隐藏并显示标签，具体取决于您在Ionic应用中的位置。我目前正在尝试使用全局布尔behaviourSubject来实现这一点。为了简洁起见，我修改了以下代码。具有全球行为主题的动态选项卡？

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

在我的产品，我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>

然而，当我在页面之间导航，标签仍然不隐瞒，并相应显示。

有人可以解释我要去哪里错了吗？我对这种方法的理解是，行为主体从其他类/组件获取值，然后允许将其应用到其他地方。

在此先感谢，非常感谢。如果你需要更多的细节，请询问。

编辑

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

观察

所以我来到了离子标签是罪魁祸首全球behaviourSubject结束一些广泛挖掘后/ ngIf貌似不一起工作。我将它们撕掉，并使用Ionic提供的侧边菜单模板制作了自己的选项卡。这解决了我的问题，现在这些选项卡动态地换出。

来源

2017-02-17 Alsh

我想你错过了showActionTabs的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); 
});

来源

2017-02-17 16:14:15 Bhetzie

感谢您抽出时间来帮助，这已经得到了我更进一步。我在我的构造函数中应用了选项卡代码。但在ngOnInit（）中，我设置了一个间隔来显示每5秒this.showTabs的值，但它返回undefined。不应该将它设置为从您编写的选项卡代码行中拉出的值吗？ – Alsh

间隔背后的想法到底是什么？最初是否显示值？我假设未定义是因为你有：this.showActionTabs.next（val）; 因此，如果您在间隔中订阅，则只有在初始化时设置的false值。我认为它应该如何工作的是，当设置一个新值时，通过产品页面，showTabs将更改为最新的可观察值 – Bhetzie

我试图查看this.showTabs中的值是否会在导航产品和产品详细信息页面。但它从第一个时间间隔返回未定义。对不起，我可能正在尝试我不应该做的事情！哈哈。删除它，它确实记录了导航页面的真和假之间的变化。但是，* ngIfs不会改变。当它设置为false时，标签不会隐藏，它们仍然显示。：/道歉，如果我没有道理，Angular 2和Ionic我只会在最后一周左右拿起！ – Alsh

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

回答

相关问题