在 Angular 8 中監聽 DOM 事件的最佳實踐是什么？

Question

我想從 Angular 8 的窗口中收聽“存儲”事件。那么，在 Angular 中執行以下操作的最佳實踐是什么？

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

一種方法是使用 Renderer2，但有更好的方法嗎？

Answer 1

您可以為此使用 RxJS。 從官方文檔，

RxJS 提供了許多可用於創建新 observable 的函數。 這些函數可以簡化從事件、計時器、承諾等事物創建可觀察對象的過程。

RxJS 也使用純函數，這將最小化錯誤的風險。

import { Observable, fromEvent } from 'rxjs';

var storage = Observable.fromEvent(window, 'storage').subscribe(res => console.log(res));

Answer 2

您可以將主機偵聽器附加到本地存儲，因為 Storage 接口在它影響的全局對象上發出存儲事件。

像這樣的東西

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