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

首先，我认为异步管道无论如何都不适用于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不需要订阅。

BehaviorSubject和条件组件显示

2 个答案: