Angular:绑定到服务的可观察属性 ->值不更新 [英] Angular: Binding to a observable property of service -> value doesn't update

问题描述

我正在尝试使用 在两个浏览器选项卡/窗口之间进行通信广播频道 API.两个角度服务实例之间的通信似乎有效，但未显示对 observable 值的更改.我正在尝试主要使用 async 管道来实现这一点.

I'm trying to communicate between two browser tabs/windows using BroadcastChannel API. The communication seems to work between two instances of angular service, but changes to the values of the observable are not shown. I'm trying to achieve this using mainly the async pipe.

我在 StackBlitz

我有两个使用路由器显示的组件.(控制和显示)

I have two component that are showed using the router. (controland display)

我有一个服务 (MessagingService)，其中有一个 BehaviorSubject 和 BroadcastChannel API -communications.该服务被注入到两个组件中.

I have a service (MessagingService) where I have a BehaviorSubject and BroadcastChannel API -communications. That service is injected into both components.

  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 中的新值，但这些值不会更新.

When I open two tabs (one in /control and one in /display) I can increment the value in /control and to receive the new values in /display at console but the values wont be updated.

绑定:

服务值:{{ messenger.value$ |异步 }}</p>

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

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

So the question is, what I'm doing wrong? I made additional subscription in displayand the fires the next call but the async binding doesn't get updated. I'm also seeing the correct MessageEvent in that same tab with correct value in data.

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

Additional testing shows that the value is updated when the button for changing local value is pressed. So it seems to be an issue with change detection.

推荐答案

如果您在 angular 上下文之外(即外部)改变数据，那么 angular 将不会知道这些变化.您需要在组件中使用 ChangeDetectorRef 或 NgZone 来使角度感知外部变化，从而触发变化检测.

If you are mutating data outside of the angular context (i.e., externally), then angular will not know of the changes. You need to use ChangeDetectorRef or NgZone in your component for making angular aware of external changes and thereby triggering change detection.

就您而言，您的服务可能以某种方式超出了 Angular 的区域.这就是 Angular 无法检测变化的原因

In your case, Probably your service somehow breaks out of Angular's zone. That's why Angular is unable to detect Changes

这应该有效

   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)
      }
    );
  }

1. 角度区域
2. 了解区域
3. 角度变化检测说明

分叉的 StackBlitz

这篇关于Angular:绑定到服务的可观察属性 ->值不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！