路由到輔助路由不適用於router.navigate

Question

在我的angular 8應用程序中，當首次加載主頁時，它會將(sidebar:homesidebar)輔助路由附加到url，並加載homesidebar就好了。 在主頁側欄上，有一個登錄按鈕，單擊該按鈕可導航到登錄頁面。 登錄頁面的URL包含預期的homesidebar，並在側面顯示了homesidebar，但是在用戶登錄后，該sidebar不會更改為用戶的儀表板特定的sidebar，並且顯示的(sidebar: homesidebar)該homesidebar仍然可見。網址欄。

我遇到的第二個問題是設置了我的代碼，以便如果用戶嘗試訪問特定於用戶的儀表板而不先登錄，就像他們只是將用戶儀表板組件的url輸入url欄，然后他們將被帶到登錄頁面，並在側面顯示homesidebar，但沒有顯示出來，甚至沒有homesidebar。 根本沒有顯示側邊欄，並且url位置欄沒有指定輔助路由（它僅顯示： localhost:4200/login ）。

如果用戶從該格式錯誤的頁面登錄，則他們將被重定向到其各自的儀表板頁面，但根本不會顯示其各自的側邊欄。 實際上，根本沒有顯示任何側邊欄，並且在URL欄中沒有顯示。 通過調試該應用程序，我已確認正在使用router.navigate函數進行重定向的代碼中生成了所有變量。 我該如何解決這些問題？ 謝謝。

更新：

登錄后，當我在chrome瀏覽器中手動重新加載頁面時，可以看到右側邊欄。

路線：

const routes: Routes = [

{ path: 'register', component: RegisterComponent },
{ path: 'login', component: LoginComponent },
{ path: 'manager', component: ManagerInterfaceComponent, canActivate: [ManagerGuard] },
{ path: 'employee', component: EmployeeInterfaceComponent, canActivate: [EmployeeGuard],
  children: [
    {path: '', redirectTo: '/employee(sidebar:employeesidebar)', pathMatch: 'full'},
    {path: 'schedule', component: EmployeeScheduleComponent },
  ]
},
{ path: 'vendor', component: VendorInterfaceComponent, canActivate: [VendorGuard] },
{ path: 'aboutus', component: AboutUsComponent },
{ path: 'mission', component: MissionStatementComponent },
{ path: 'contactus', component: ContactUsComponent },
{ path: '', redirectTo: '/home(sidebar:homesidebar)', pathMatch: 'full'},
{ path: 'homesidebar', component: HomeSidebarComponent, outlet: 'sidebar' },
{ path: 'employeesidebar', component: EmployeeSidebarComponent, outlet: 'sidebar' },
{ path: 'home', component: HomeComponent },
{ path: '**', component: PageNotFoundComponent}
];

員工守衛：

 canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    this.user = this.authService.getUser();

    let role = this.user && this.user.role[0] || null;

    if(role === "employee" && this.authService.isAuthenticated()){
      return true;
    }

    this.router.navigate(['login', { outlets: {"sidebar": ["homesidebar"]}}]);
      return false;

  }

登錄組件：

 login() {

    if (this.loginForm.invalid) {
      return;
  }
    this.authService.login(
      {
        username: this.f.username.value,
        password: this.f.password.value
      }
    ).pipe(
      catchError(
        error => {this.badCredentials = true;
        console.log(error); 
        return error;} )
    )
    .subscribe(
        res => {
          let role = res.role[0];
          let sideBarPath = this.processRole(role);

            this.router.navigate([`${role}`, {outlets: {'sidebar': [sideBarPath]}}]);
          }
      );

  }

Answer 1

對於登錄頁面未從Guard中的重定向加載homesidebar的問題，我只是使用router.navigateByUrl路由器函數而不是router.navigate來加載url：

router.navigateByUrl('/login(sidebar:homesidebar)')

至於登錄后右側儀表板側欄未顯示的問題，我不得不將登錄組件中的導航功能更改為：

this.router.navigate( / $ {role} , {outlets: {sidebar: null}}], { replaceUrl: true}) ;

null值將刪除homesidebar，以便可以將Employeesidebar加載到'employee'路徑'employee'路徑中指定的路徑中：

{ path: 'employee', component: EmployeeInterfaceComponent, canActivate: [EmployeeGuard],
  children: [
    {path: '', redirectTo: '/employee(sidebar:employeesidebar)', pathMatch: 'full'},
    {path: 'schedule', component: EmployeeScheduleComponent },
  ]