Angular：绑定到服务的可观察属性 -> 值不更新

Question

我正在尝试使用 BroadcastChannel API 在两个浏览器 tabs/windows 之间进行通信。 angular 服务的两个实例之间的通信似乎有效，但未显示对可观察值的更改。我试图主要使用 async 管道来实现这一点。

我在 StackBlitz

上有我的问题的演示

我有两个使用路由器显示的组件。 (control和display)

我有一项服务 (MessagingService)，其中我有 BehaviorSubject 和 BroadcastChannel API 通信。该服务被注入到两个组件中。

  export class MessagingService {
  private _value = 1;
  valueSubject: BehaviorSubject<number> = new BehaviorSubject<number>(this._value);
  value$: Observable<number> = this.valueSubject.asObservable();

  private bc: BroadcastChannel = new BroadcastChannel('controlChannel');

  constructor() {
    this.bc.onmessage = this.handleEvent;
  }

当我打开两个选项卡（一个在 /control 中，一个在 /display 中）时，我可以增加 /control 中的值并接收 /display 中的新值在控制台，但不会更新值。

绑定：<p>service value: {{ messenger.value$ | async }}</p>

注入：constructor(private messenger: MessagingService) { }

所以问题是，我做错了什么？我在 display 中进行了额外的订阅并触发了 next 调用，但异步绑定没有得到更新。我还在同一个选项卡中看到正确的 MessageEvent，数据中的值正确。

编辑：附加测试表明，当按下更改本地值的按钮时，该值会更新。所以这似乎是变化检测的问题。

Answer 1

如果您在 angular 上下文之外（即外部）更改数据，那么 angular 将不知道这些更改。您需要在您的组件中使用 ChangeDetectorRef 或 NgZone 来让 angular 了解外部更改，从而触发更改检测。

在您的情况下，您的服务可能以某种方式超出了 Angular 的范围。这就是为什么 Angular 无法检测到更改

这应该有效

   import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
@Component({
  selector: 'app-display',
  template:
    //.....rest of the code
    constructor(private messenger: MessagingService,private zone: NgZone,) {}

   ngOnInit() {
    this.data = new Data();
    this.sub = this.messenger.value$.subscribe(
      res => {
        this.zone.run(() => this.data.value = res)
      }
    );
  }

Forked StackBlitz

Angular：绑定到服务的可观察属性 -> 值不更新

Angular: Binding to a observable property of service -> value doesn't update

angular

binding

angular-services

broadcast-channel

Angular：绑定到服务的可观察 属性 -> 值不更新

Angular: Binding to a observable property of service -> value doesn't update

angular

binding

angular-services

broadcast-channel

Angular：绑定到服务的可观察属性 -> 值不更新