-1

私はこの単純なサービスを持っています:

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値に基づいて条件付きで s を表示するにはどうすればよいBehaviourSubjectですか?

4

2 に答える 2

-1

まず第一に、とにかく非同期パイプが 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>
于 2016-12-14T16:33:31.550 に答える