如何在我的情况下观看 angular2 中的本地存储？答案

【问题标题】：how to watch localstorage in angular2 for my case?如何在我的情况下观看 angular2 中的本地存储？
【发布时间】：2017-06-27 09:36:32
【问题描述】：

我想看本地存储但我无法编写代码

我的场景是当用户登录时，我正在获取用户角色 ID 和权限列表，仅依赖于权限侧菜单，登录后用户可以切换角色，在这种情况下，侧菜单将根据权限更改，这里我将角色 id val 保存在 localstorage 中，当用户切换角色角色 id 正在更改并且权限也发生更改时，

我的疑问是如何观察这种变化，

我点击了这个链接How can I watch for changes to localStorage in Angular2?

但我无法编写我的场景，请帮助我

我的代码供参考

 constructor(public http: Http,public MenuService:MenuService) {
this.userroleId =  localStorage.getItem("roleId")
}

 getSideMenu () {
if( this.userroleId == 1) {
  this.MenuService.getAdminMenu().subscribe(menuItems => this.menuItems= menuItems, error => console.log(error));
}

if(this.userroleId == 2){
  this.MenuService.getpractitionerMenu().subscribe(menuItems => this.menuItems= menuItems, error => console.log(error));
  console.log('ss')
}

【问题讨论】：

标签： angular local-storage observable angular2-services angular-local-storage

【解决方案1】：

我建议您跳过 localStorage 并转而使用服务。所以类似于以下内容：

@Injectable()
export class Service {

  private userroleId = new Subject<string>();
  userRole = this.userroleId.asObservable();

  roleReceived(role: string) {
    this.userroleId.next(role);
  } 
}

这会处理对角色的更改，并且使用此服务的组件将订阅这些更改。因此，您要在哪里设置角色，请执行以下操作：

emit(value: string) {
    this.service.roleReceived(value); // push the new role to service
}

在需要订阅角色的地方，在该组件的构造函数中添加以下内容：

service.userRole.subscribe(role => {
  this.role = role; // store the role in a variable
  getSideMenu(this.role) // check the role and render view accordingly!
})

现在，每当对角色进行更改时，由于该组件正在订阅更改，因此角色会动态更新。所以在这里你可以使用决定要显示什么视图的函数。

最后，上面的一个简单示例在子-父上下文中，仅隐藏/显示 div 以模拟视图更改。您当然需要进行更改以适应您的用例。 Plunker

【讨论】：