BehaviorSubject и условный компонент отображения

Question

Я получил эту простую службу:

import { Injectable } from '@angular/core'; 
import { BehaviorSubject } from 'rxjs'; 

@Injectable() 
export class HighlightsService { 
    private _highlitTab: string = ''; 
    highlitTab$: BehaviorSubject<string> = new BehaviorSubject(this._highlitTab); 

    public get tab(): string { 
    return this._highlitTab; 
    } 

    public set tab(val: string) { 
    this._highlitTab = val; 
    this.highlitTab$.next(this._highlitTab); 
    } 
} 

который установлен в моих закладках:

(select)="highlightsService.tab = 'show component0' 

Сейчас, на мой взгляд, который показывает несколько директив, как я условно показать им?

<app-component0 [hide]="highlightsService.highlitTab$ | async"></app-component0> 
<app-component1 [show]="highlightsService.highlitTab$ | async"></app-component0> 

Очевидно, что не будет работать, потому что нет ===. Есть ли ngSwitch эквивалент?

Как я могу условно показать Component с по значению BehaviourSubject?

Answer 1

Прежде всего, я не думаю, что асинхронная труба будет работать с Just BehaviorSubject в любом случае. Это, как я хотел бы сделать это:

import { Injectable } from '@angular/core'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class HighlightsService { 
    private _highlitTab: string = ''; 
    private _highlitTab$: BehaviorSubject<string> = new BehaviorSubject(this._highlitTab); 
    public highlitTab$: Observable<string> = this._highlitTab$.asObservable(); 

    public get tab(): string { 
    return this._highlitTab; 
    } 

    public set tab(val: string) { 
    this._highlitTab = val; 
    this._highlitTab$.next(this._highlitTab); 
    } 
} 

Значение переменной _highlitTab также сомнительна, потому что вы можете получить его в рамках услуги с this._highlitTab$.getValue().

Теперь в компоненте, вы впрыскивать HighlightsService, как вы, кажется, уже будет делать, и подписаться на него, вероятно, в ngOnInit():

this.highlightsService.highlitTab$ 
    .filter(value => value) 
    .subscribe(value => this.hightlitTab = value); 

Сетевой фильтр гарантирует, что вы не получите пустой значение (значение инициализации). Это может быть не ваше желаемое поведение.

Наконец, теперь вы можете отображать или скрывать какую-либо вкладку, сравнивая ее с обновленным локальным значением highlitTab. Если бы это был я, я, вероятно, просто передал значение highlitTab на дочернем компоненте, и этот компонент может решить, показывать себя или нет.

<child-component0 [highlitTab]='hightlitTab'></child-component> 

Answer 2

Законченное переместив вкладку логику проверки в Service. Теперь моим Component s не нужно подписываться.