Kind Weg Render erst nach Eltern-Route gemacht

Question

Ich habe eine Routing-Struktur

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

In Hauptkomponente ngOnInit I Submodule Liste

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 
     }))); 
    }); 
    } 

Dann Emloyees Komponentenliste erhalten Submodule von localstorage und dann Ansicht rendert . Bu das Problem beim Besuch localhost:4200/#/employees/ Dann versucht Mitarbeiter-Komponente, Submodule aus dem lokalen Speicher vor MainComponent in lokalen Speicher zu speichern. Wie kann ich dieses Problem lösen? Vielen Dank.

Answer 1

Implementieren Sie den AuthGuard, um das Rendern der untergeordneten Komponente vor der übergeordneten Komponente zu verhindern.

Ändern Sie die Routen wie:

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