부모 경로

Question

가 나는 서브 모듈 목록을 얻을 ngOnInit 홈페이지 구성 요소에서 라우팅 구조

path: '', 
    component: MainComponent, 
    children: [ 
     {path: 'employees', component: EmployeesComponent, canActivate: [AuthGuard], children: [ 
     {path: '', component: EmployeeListComponent, pathMatch: 'full', canActivate: [AuthGuard]}, 
     {path: ':id', component: EmployeeMainComponent, pathMatch: 'full', canActivate: [AuthGuard]} 
     ]} 
    ] 
    } 

이 렌더링 된 후에 만 ​​자식 경로를 렌더링

getSubmodules(id) { 
    this.universityAsideService.getSubmodules(id) 
     .subscribe((subModules) => { 
     this.subModules = subModules; 
     this.saveSubModules(subModules).subscribe((data) => this.goToModule(id)); 
     console.log('submodules in getSubmodules, UniversityAside Co'); 
     console.log(this.subModules); 
     }); 
    } 

    saveSubModules(subModules): Observable<any> { 
    return Observable.create((obs) => { 
     obs.next(localStorage.setItem('subModules', JSON.stringify({ 
     subModules: subModules 
     }))); 
    }); 
    } 

다음 Emloyees 구성 요소는 로컬 스토리지에서 서브 모듈의 목록을 다음 뷰를 렌더링 . 방문시 문제가 발생했습니다. localhost:4200/#/employees/ 그러면 직원 구성 요소는 MainComponent가 localstorage에 저장하기 전에 localstorage에서 하위 모듈을 가져 오려고 시도합니다. 이 문제를 어떻게 해결할 수 있습니까? 감사.

Answer 1

상위 구성 요소보다 하위 구성 요소가 렌더링되지 않도록 AuthGuard를 구현하십시오. 그 acheive하는 내가 AuthGuard 무엇을 쓸 수 Thanks.So

path: '', 
    component: MainComponent, 
    canActivate: [AuthGuard], 
    children: [ 
     {path: 'employees', component: EmployeesComponent, canActivate: [AuthGuard], children: [ 
     {path: '', component: EmployeeListComponent, pathMatch: 'full', canActivate: [AuthGuard]}, 
     {path: ':id', component: EmployeeMainComponent, pathMatch: 'full', canActivate: [AuthGuard]} 
     ]} 
    ] 
    }