Angular（版本 8） - 订阅不触发答案

【问题标题】：Angular (version 8) - Subscribe not firingAngular（版本 8） - 订阅不触发
【发布时间】：2020-02-24 14:35:52
【问题描述】：

我正在尝试通过使用 observables 和 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> 。

【问题讨论】：

您如何注册您的服务？作为组件提供者、模块提供者或@Injectable({ providedIn: 'root' })?
@KurtHamilton ---> @Injectable({ providedIn: 'root' })
你能在 stackblitz 中重新创建吗？
添加了 StackBlitz
bottom-bar 应该在哪里呈现？我没在里面看到它

标签： angular observable subject

【解决方案1】：

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

修复 - 将其粘贴到 app.component.html

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

【讨论】：

好收获。实际上在 th rel 应用程序中我有它，..但是在 ngIf*..
这使得 stackblitz 运行，所以它非常接近解决方案。另一方面，我放了一个书签，当我重新加载页面时，它显示调用了构造函数。我有点困惑。
@yeaaaaahhhh..hamfhamf 是在您在某处添加<app-bottom-bar></app-bottom-bar> 之后出现的吗？除了渲染，你还在用BottomBarComponent 做任何花哨的事情吗？

【解决方案2】：

你能改吗

private style = new BehaviorSubject <string>();

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

谢谢

【讨论】：

我认为 BehaviourSubject 需要用一个值来启动。我已经试过了

【解决方案3】：

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

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

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

现在，如果您在调用 style.next() 之后订阅，您的样式 observable 将缓冲最后一个值并发出此值。

【讨论】：

当点击按钮并且订阅在构造函数中时调用 updateStyleArray()。