如何在angular2中以localstorage订阅一个项目,当更改时,获取值

时间:2016-05-31 09:24:46

标签: angular typescript

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

1 个答案:

答案 0 :(得分:21)

对于一个基本的想法,这是如何做到的。

只需要根据您的配置编写正确的导入路径

撰写全球服务:

import {Subject} from 'rxjs/Subject';   

@Injectable()
export class GlobalService {
 itemValue = new Subject();

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

引导此服务:

bootstrap(YourApp, [GlobalService]);

<强>用法:

  • 更改此处

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

  someEvent() {
    this.globalSrv.theItem = 'someValue'; // this change will broadcast to every subscriber like below component
  }
}
  • 将反映在这里

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

      globalSrv.itemValue.subscribe((nextValue) => {
         alert(nextValue);  // this will happen on every change
      })

  }
}