Angular（版本 8）- 订阅未触发

Question

我正在尝试通过使用可观察对象和 Subject 在组件之间建立通信。

这是我的服务。

公共服务

  private style = new Subject<string>();

  getStyle(): Observable<any> {
    return this.style.asObservable();
  }

  updateStyleArray(styleToApply) {
    this.style.next(styleToApply);
  }

我尝试使用 getStyle() 方法订阅的组件在构造函数中包含以下代码。

底部栏

    this.commonService.getStyle().subscribe(style => {
      console.log('I am firing in order not to be fired!!!');
    });

我在其中调用 next() 方法的组件具有以下代码。

边栏

 this.commonService.updateStyleArray('This is the name of a style');

我已将代码简化到最低限度，但它仍然没有触发 subcribe() 函数。

----> Stackblitz

解决方法和注意事项

为了在组件之间建立通信，上述技术非常有效。错误是因为 app-bottom-bar 是用 ngIf* 实现的，没有调用构造函数*，因此没有调用订阅函数。

*<app-bottom-bar *ngIf="isBottomBarVisible"></app-bottom-bar>。

Answer 1

你能改变吗

private style = new BehaviorSubject <string>();

底部栏可能会在侧边栏之前呈现，从而导致订阅丢失。 BehaviorSubject 将使最后的订阅对所有组件可用。

谢谢

Answer 2

Subject 不会为新订阅者重播旧值。因此，如果您在订阅发生之前调用了 updateStyleArray()，它将不会触发，直到对 updateStyleArray() 进行新的调用。

要解决此问题，您可以将 Subject 替换为 ReplaySubject 并将缓冲区大小设置为 1:

  private style = new ReplaySubject<string>(1);

现在，如果您在调用 style.next() 之后订阅，您的样式可观察对象将缓冲最后一个值并发出该值。

Answer 3

BottomBarComponent 构造函数未被调用。因此，您实际上还没有订阅。

Fix - 将其粘贴到 app.component.html

<app-bottom-bar></app-bottom-bar>

Angular（版本 8）- 订阅未触发

Angular (version 8) - Subscribe not firing

subject

observable

angular