Question

我正在尝试使用BroadcastChannel API在两个浏览器标签/窗口之间进行通信。通讯似乎在两个角度服务实例之间进行，但未显示可观察值的更改。我正在尝试主要使用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

如果您要在角度范围之外（即外部）对数据进行突变，那么角度将不知道这些变化。您需要在组件中使用vectorAdd或ChangeDetectorRef，以使角度了解外部变化，从而触发变化检测。

在您的情况下，您的服务可能会以某种方式脱离Angular的区域。这就是Angular无法检测到更改

的原因

这应该有效

NgZone

Forked StackBlitz

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

1 个答案: