0

我想看本地存儲,但我無法編寫代碼如何在我的情況下在angular2中查看localstorage?

我的場景是當用戶登錄時我正在獲取用戶角色ID和權限列表,只允許在用戶角色側面菜單是buit,登錄後用戶可以切換角色,在這種情況下,側面菜單會改變權限,這裏我保存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') 
} 

回答

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來模擬視圖更改。您當然需要進行更改以適合您的使用情況。 Plunker

相關問題