Question

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

我的场景是当用户登录时我获得了用户角色ID和权限列表，只有侧面菜单才允许使用权限，登录后用户可以切换角色，在这种情况下，侧面菜单会根据权限更改，这里我在localstorage中保存角色id val，当用户切换角色时，角色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')
}

Answer 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

如何在angular2中观看localstorage？

1 个答案: