Динамические вкладки с глобальным поведением?

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

В своих изделиях-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 принимает значения из других классов/компонентов, а затем позволяет применять его где-то еще.

Заранее благодарим за это. Если вам нужно больше деталей, пожалуйста, спросите.

EDIT

Мой код вопрос был обновлен, чтобы отразить ответ от @Bhetzie. В настоящее время вкладки все еще не отображаются или не скрываются, хотя this.showTabs устанавливается корректно через behaviourSubject, насколько я могу судить.

РЕЗУЛЬТАТ

Таким образом, после некоторого обширного рытье я пришел к выводу, что ион-вкладки были виновницей к глобальной behaviourSubject/ngIf, казалось бы, не работают вместе. Я разорвал их и сделал свои собственные вкладки, используя шаблон бокового меню, предоставленный Ionic. Это устранило мою проблему, и теперь вкладки меняются динамически.

Answer 1

Я думаю, что вам не хватает геттера для showActionTabs.

Он всегда будет устанавливать showTabs как независимо от того, какой объект поведения инициализирован как.

Вы можете попробовать:

сервис globals.ts

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

tabs.ts

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