web-dev-qa-db-ja.com

LocalStorageangular2の変更に注意してください

LocalStorageとngOnInitフックにいくつかのオブジェクトを保存しました。このデータを、* ngForを使用してテンプレートに表示する配列に受け取ります。 LocalStorageの変更を監視し、ビューを自動的に更新するにはどうすればよいですか？

angularlocal-storageangular2-template
8
Hubert

あなたが欲しいのは主題です。こちらのドキュメントを確認してください（ https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/subject.md ）

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
})

}
20
Rohan Fating