Как посмотреть местный ресурс в угловом2 для моего случая?

Question

Я хочу посмотреть локальное хранилище, но я не могу написать код

мой сценарий, когда пользователь вошел в систему. Я получаю идентификатор пользователя и список разрешений, зависит от разрешения. Только боковое меню - это buit, после входа в систему пользователь может роль переключателя, в этом случае боковое меню будет меняться в соответствии с разрешением. Здесь я сохраняю роль id val в localstorage, когда пользователь переключает роль. Идентификатор роли меняется и разрешение также изменяется,

Мое сомнение в том, как смотреть эти изменения ,

Я следил за этой ссылкой 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