Angular 注意本地存储角度的变化2

我在LocalStorage中存储了一些对象，在NgonitHook中，我将这些数据接收到数组中，并用*ngFor在模板中显示。如何监视LocalStorage中的更改并自动更新视图？

您需要的是主题。在这里查看文档（）

举个简单的例子，如下所示：
@可注射（）
导出类存储服务{
...
private-storageSub=新主题（）；
...
watchStorage（）：可观察{
返回此.storageSub.asObservable（）；
}
setItem（键：字符串，数据：任意）{
setItem（键、数据）；
this.storageSub.next（'changed'）；
}
removeItem（键）{
localStorage.removietem（键）；
this.storageSub.next（'changed'）；
}
}
内部组件
构造函数（私有存储服务：存储服务）{}
恩戈尼尼特（）{
this.storageService.watchStorage（）.subscribe（（数据：字符串）=>{
//每当本地存储数据发生更改时，将调用此函数
//在此处使用localStorage代码，并在此处为ngFor设置数据
})
}

如果您可以指望所有使用localStorage的东西都能通过这项服务实现，那么这个解决方案最终会比我的更干净。不过，您确实存在一些代码问题。主题的类型是布尔型的，但您要将字符串传递给next（），因为您要传递字符串，所以它也可能是已更改项的键。此外，可能会设置一个项目，该项目可能与存储中已有的项目相匹配，因此不应更改任何内容，但OP可以根据需要实现该级别的详细信息。非常感谢。工作非常完美，但如果用户直接从浏览器的devTools更改本地存储怎么办？我应该取消订阅组件吗？

For a quick example, something like this:
    @Injectable()
export class StorageService {
  ...
  private storageSub= new Subject<String>();
  ...

  watchStorage(): Observable<any> {
    return this.storageSub.asObservable();
  }

  setItem(key: string, data: any) {
    localStorage.setItem(key, data);
    this.storageSub.next('changed');
  }

  removeItem(key) {
    localStorage.removeItem(key);
    this.storageSub.next('changed');
  }
}

Inside Component

constructor(private storageService: StorageService  ){}
ngOnInit() {
this.storageService.watchStorage().subscribe((data:string) => {
// this will call whenever your localStorage data changes
// use localStorage code here and set your data here for ngFor
})

}