1

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

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

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

我关注了这个链接 如何在 Angular2 中观察 localStorage 的变化？

但我无法写出我的场景，请帮帮我

我的代码供参考

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

1 回答 1

0

我建议您跳过 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 以模拟视图更改。您当然需要进行更改以适应您的用例。普朗克

于 2017-02-11T09:31:33.087 回答