DOM 未使用 Angular 5 的 EventListener 进行更新

Question

上下文：我正在使用 Angular PWA 通过 WKWebview 与 iOS 本机应用程序通信。我正在使用 messageHandlers 来在打字稿文件和 Swift 逻辑代码之间共享数据。

问题：我正在使用 addEventListener 来侦听 window 对象上的特定事件。在我的组件中，我订阅了一个可观察对象来监听变化。但是我的组件没有在 subscribe 方法中应用变量更改。

myService.ts

public myValue$ = new Subject<number>();

window.addEventListener('didDeviceDisconnected', (e) => {
     ...
     this.dispatchInfo(someInfo);
});

private dispatchInfo(value: number) {
     this.myValue$.next(value);
}

public getValue(): Observable<number> {
     return this.myValue$.asObservable();
}

myComponent.ts

// Wait for the notification
this.myValueSubscription = this.myService.getValue().subscribe(value => {
     this.myValue = value;
     alert("myValue : " + this.myValue);
})

myComponent.html

{{ myValue }}

警报正确显示该值，但 DOM 显示该值未定义。我还尝试在订阅函数中添加 setTimeout 但没有成功。如何应用订阅方法的更改？它在 angular 范围之外吗？

Answer 1

是的，它在 angular 范围之外。

你可以试试这个..

myComponent.ts

import { Component , NgZone } from '@angular/core';

......

constructor(public ngZone: NgZone)

......

this.myValueSubscription = this.myService.getValue().subscribe(value => {
    this.ngZone.run(()=> {
          this.myValue = value;
        });
})

Answer 2

我使用提供更改检测功能的 ChangeDetectorRef 解决了这个问题。

import { Component, ChangeDetectorRef } from '@angular/core';

constructor(..,  private cdr: ChangeDetectorRef){}

this.myValueSubscription = this.myService.getValue().subscribe(value => {
    this.myValue = value;
    alert("myValue : " + this.myValue);

    this.cdr.detectChanges(); // <= ADDED
})

DOM 未使用 Angular 5 的 EventListener 进行更新

DOM is not updated with EventListener using Angular 5

javascript

addeventlistener

typescript

wkwebview

angular