0

나는 로컬 스토리지를보고 싶어하지만 난 코드를 쓸 수 없습니다입니다내 케이스의 angular2에서 angular2를 보는 방법은 무엇입니까?

내 시나리오는 사용자 나 사용자 역할 ID와 권한 목록을 얻고 로그인 할 때입니다

는 로그인 사용자 후 허가만을 사이드 메뉴가 BUIT됩니다에 depeds 수 스위치 롤, 그 경우에는 사이드 메뉴가 권한에 따라 변경됩니다. 여기서 사용자가 역할 역할 ID가 변경되고 권한도 변경된 경우 localstorage에 역할 ID val을 저장합니다.

내 변경 사항은이 변경 사항을 보는 방법입니다 ,

나는이 링크를 따라 갔다. 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

나를

에게 내 코드를 도와주세요. 따라서 다음과 같이됩니다 :

@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

관련 문제