新手請教 router-outlet 問題

General
1

架構如下，後台程式
在 app.component.html 只有 router-outlet
利用 app-routing.module.ts 必須通過 SignIn Guard 才能進入到 內頁 home.component.html

const routes: Routes = [
{ path: ‘Management1’, pathMatch: ‘full’, component: ManagementComponent1 ,canActivate: [SignInGuard]},
{ path: ‘Management2’, pathMatch: ‘full’, component: ManagementComponent2 ,canActivate: [SignInGuard]},
{ path: ‘Home’, pathMatch: ‘full’, component: HomeComponent ,canActivate: [SignInGuard]},
{ path: ‘SignIn’, pathMatch: ‘full’, component: SignInComponent },
{ path: ‘**’, pathMatch: ‘full’, redirectTo: ‘/SignIn’ },
];

home.component.html 的架構是左邊 sidenav 右邊 router-outlet 置換 Management1,2 的內嵌頁，但怎麼寫都是會直接只置換 app.component.html 第一個 router-outlet 直接整頁跳頁，請問整個 app 是只能有一個 router-outlet 嗎? 還是有甚麼其他方式能達到同樣目的，期待回復萬分感激。

2

route 是可以巢狀的，你可以參考我針對新加入的朋友所撰寫的文章，抑或是參考我初學時，欲釐清路由觀念所練習的專案設置

1個讚
3

根據問題…
我大概會用這樣的寫法

const routes: Routes = [
{
path: '',
canActivate: [AuthGuard],
component: SidenavComponent,
children: [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'Management1', component: Management1Component },
  { path: 'Management2 ', component: Management2Component },
 ],
},
{ path: 'login', component: LoginComponent },
];

HTML

< mat-toolbar color=“primary” fxLayoutGap=“2%”>
<button mat-button [routerLink]="[’/Management1’]">Management1< /button>
<button mat-button [routerLink]="[’/Management2’]">Management1< /button>
< /mat-toolbar>
< router-outlet>< /router-outlet>

有錯的話再請各路大神指教改善

1個讚
4

受教了，剛學習理解能力不是很好，改成這樣感覺易讀性跟擴充性都好很多，感激。

1個讚
5

感恩，已參考路由觀念的程式碼，達成想要的操作目的。