在 Angular 8 中监听 DOM 事件的最佳实践是什么?

Question

我想从 Angular 8 中的窗口侦听"存储"事件。那么，在 Angular 中执行以下操作的最佳实践是什么？

window.addEventListener('storage', () => {
});

一种方法是使用 Renderer2，但有更好的方法吗？

Answer 1

你可以使用 RxJS 来实现这一点。从官方文档中，

RxJS提供了许多可用于创建新的可观察量的函数。这些函数可以简化从事件、计时器、承诺等内容创建可观察量的过程。

此外，RxJS使用纯函数，这将最大限度地减少错误的风险。

import { Observable, fromEvent } from 'rxjs';
var storage = Observable.fromEvent(window, 'storage').subscribe(res => console.log(res));

Answer 2

您可以将主机侦听器附加到本地存储，因为存储接口在其影响的全局对象上发出存储事件。

像这样的东西

import { KeyboardEvent } from '@angular/core';
@Component({
...
host: {
'(document:storage)': 'onStorageChange($event)'
}
})
export class MyComponent {
onStorageChange(ev:KeyboardEvent) {
// do something meaningful with it
console.log(`Localstorage change/updated!`);
}
}