BehaviorSubject 和条件组件显示

Posted 2023-02-22

【中文标题】BehaviorSubject 和条件组件显示

【英文标题】：BehaviorSubject and conditional Component display

【发布时间】：2017-04-30 01:23:13

【问题描述】：

我有这个简单的服务：

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 等价物？

如何根据BehaviourSubject 值有条件地显示Components？

【参考方案1】：

最终将选项卡检查逻辑移至Service。现在我的Components 不需要订阅了。

【参考方案2】：

首先，我认为异步管道无论如何都不能仅与 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>

【讨论】：

谢谢，但是那会起作用，但是我需要 onInit/onDestroy 样板来处理取消/订阅。 async 管道确实有效。我正在寻找的是一个包含 Service 和 component.html 中所有逻辑的解决方案。会保持清洁。

我不太明白您反对组件中的逻辑。祝你好运。