仅在渲染父路径后渲染子路径

Question

我有一个路由结构

  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]}
      ]}
    ]
  }

在Main component ngOnInit中，我得到了子模块列表

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组件从localstorage获取子模块列表，然后呈现视图。但是访问localhost:4200/#/employees/时的问题，那么employees组件试图在MainComponent保存到本地存储之前从本地存储中获取子模块。我该如何解决这个问题？谢谢。

Answer 1

实现AuthGuard以防止在父组件之前呈现子组件。

如下所示修改路由：

  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]}
      ]}
    ]
  }