angular - 无法使用带有 ngClass 绑定(bind)的可观察对象来更新 View

Question

我有一个启动外部应用程序的 Electron/Angular 应用程序，我正在监视这些服务是否正在运行，并在页脚中显示绿色/红色指示器来指示这一点。我正在使用 Electron IPC API 将设备的状态从 Electron 传递到 Angular。这一切正常，我收到了可以在 Angular 中收听的发出事件。

我有一个监听 IPC 状态更新的服务

this.electronService.ipcRenderer.on(IpcChannels.SERVICE_STATUSES_UPDATE, (event, { deviceStatus }) => {
  // sending the new values through a private subject. There is a public
  // observable for the subject which consumers use. This works, i
  // receive updates when the services are stopped/started
  this.deviceStatus.next(deviceStatus);
});

在我的组件模板中

<span class="bottom-icon dot"
  [ngClass]="{'inactive': !(deviceStatusService.deviceStatus$ | async)}"></span>

<span>{{'FooterBar.deviceLabel' | translate}}</span>

这就是失败的地方。该类永远不会更新为具有“非事件”类。我摆弄了几个小时，然后意外地发现它确实在工作。我猜Angular只是不会重新渲染或获取更改，因为我发现随着启动服务的延迟，当我的应用程序在状态改变之后但在它变回原始值之前发出净请求时 Angular 会重新渲染。它确实会更新。但是在服务重新启动后，它不会更新，直到其他东西触发了 Angular 更新。

我没有 OnPush 更改检测策略。我尝试注入(inject)一个 ChangeDetectionRef 并使用组件文件自己监听 observables 并在 ChangeDetectionRef 上运行 detectChanges()。

如果我在初始化时将它添加到我的服务中并且只是手动/随机更新可观察对象，它实际上可以立即工作，但是当我切换回仅从 ipc 渲染器处理程序中发出新值时，它不会。

interval(5000)
  .subscribe(_ => {
    this.posPrintStatus.next(Math.random() > .5 ? true : false);
    this.cePosStatus.next(Math.random() > .5 ? true : false);
  });

我不知道这是一个程序问题，还是我不理解的 Angular 变化检测问题。

如果我可以提供任何其他代码/上下文，请告诉我。

Answer 1

答案很简单，但我从来没有遇到过这个问题，也从来没有想过。

这是因为 IPC 通信发生在 Angular 区域之外。我必须将 NgZone 的实例注入(inject)我的服务并使用 NgZone.run() 来更新 Angular 区域内的可观察值。