如何在 Angular 4 中查找 localStorage 的变化？

Question

我正在尝试使用 Angular 4 访问 localStorage 并使用 Observables 查找 localStorage 值的变化：

这是我一直在研究的代码：

userNameObservable: Observable<string>;
userName: String = '';
ngOnInit() {
    this.userNameObservable = Observable.create(
      Observable.of(localStorage.getItem('profileName'))
    );
    this.userNameObservable.subscribe((name: String) => {
      this.userName = name;
    })
}

但我收到一个错误ERROR TypeError: this._subscribe is not a function。我该如何解决？有没有更好更有效的方法来查找 localStorage 中的更改？

Answer 1

找到以下解决方案。

在 ngOnInit 或 AfterViewInit 中添加以下代码。

if (window.addEventListener) {
    window.addEventListener("storage", this._listener, false);
}

并在类中声明以下函数。

private _listener = () => {
   // your logic here
}

完成侦听或 ngOnDestroy 后也删除侦听器

window.removeEventListener("storage", this._listener, false);

干杯。

Answer 2

您可以使用 TypeScript getter 来实现此目的。

get userName() {
   return localStorage.getItem('profileName');
}