如何将 BehaviorSubject 与 Observable 一起使用答案

【问题标题】：how to use BehaviorSubject with Observable如何将 BehaviorSubject 与 Observable 一起使用
【发布时间】：2021-03-22 09:38:21
【问题描述】：

我有一个 div，需要添加属性取决于商店结果。商店按预期工作，当我单击某个 div 时，它的值发生了变化（返回 true 或 false）并且在我的组件中我需要获取更新的值，但正如我在 ngOnInit 中调用它时它只工作一次并且不更新。我已经阅读了BehaviorSubject，但不明白如何正确地将我的 observable 转换为它。非常感谢任何帮助！

这是我的代码

html

<div class="details__header" [attr.isOpened]="isOpened ? 'opened' : 'closed'">

isOpened: boolean;

constructor(private store: Store<AppState>) { }

ngOnInit(): void {
  this.store.select(selectSearchResultState).subscribe(el => this.isOpened = el);
}

我已经在 html 中尝试了async 管道并且它可以工作，但是我需要在我的代码中使用这个变量，所以这对我不起作用

【问题讨论】：

"当我点击某个 div 时，它的值发生了变化" - 为什么不将订阅放在 div 的点击事件处理程序中而不是 ngOnInit 挂钩中？
在 store 中更改此值的 div 在其他组件中，因此我需要检测 store 更改并从中获取最后一个值

标签： javascript html angular observable

【解决方案1】：

您应该像这样将isOpened 定义为 Observable：

isOpened$: Observable<boolean>;

constructor(private store: Store<AppState>) { }

ngOnInit(): void {
  this.isOpened$ = this.store.select(selectSearchResultState);
}

然后在带有异步管道的模板中使用它：

<div class="details__header" [attr.isOpened]="(isOpened$ | async) ? 'opened' : 'closed'">

在文档 here 中有更多关于 observable 的信息。

【讨论】：

谢谢，但我最后写了I've tried async pipe in html and it works, but I need to use this variable in my code, so this doesn't work for me
您可以通过订阅来使用代码中的 observable。例如： this.isOpened$.subscribe(isOpened => { if (isOpened) { doSomething(); } });更多信息请访问documentation