如何在 angular 2 中从 localstorage 订阅项目，并在更改时获取值

Question

我正在尝试使用 angular 2 创建一个应用程序，我的问题是如何从本地存储订阅项目...我知道我必须使用一项服务，只能从任何地方通过此服务访问 LocalStorage，但我不知道如何做到这一点。

Answer 1

For a basic Idea this is how it can be done.

Just need to write the correct Import paths accotding to your configuration

---

Write a global service:

import {BehaviorSubject} from 'rxjs';   

@Injectable({providedIn: 'root'})
export class GlobalService {
 itemValue = new BehaviorSubject(this.theItem);

 set theItem(value) {
   this.itemValue.next(value); // this will make sure to tell every subscriber about the change.
   localStorage.setItem('theItem', value);
 }

 get theItem() {
   return localStorage.getItem('theItem');
 }
}

Usage:

• Any change here

@Component({})
export class SomeComponent {
  constructor(private globalSrv: GlobalService){}

  someEvent() {
    this.globalSrv.theItem = 'someValue'; // this change will broadcast to every subscriber like below component
  }
}

• Will Reflect Here

@Component({})
export class AnotherComponent {
  constructor(private globalSrv: GlobalService){
    
      globalSrv.itemValue.subscribe((nextValue) => {
         alert(nextValue);  // this will happen on every change
      })
  
  }
}