Angular Nested Routes｜子路徑

Angular Routing路由前情提要

• Routing路由設定
• ActivatedRoute：用參數創建子頁面
• QueryParams：取得路由參數

Nested (Child) Routes 子路由

路由跳轉時，讓component直接render在同樣頁面。

1. 子路由設定

在app.module.ts定義子路由：

const appRoutes: Routes =  [
  ...
  { path: 'users', component: UsersComponent, children: [
    { path: ':id', component: UserComponent }, 
  ] },
];

2. 使用router-outlet

架構是users底下有個別的user：

<div>
    <a
        [routerLink]="['/users', user.id]"
        href="#"
        *ngFor="let user of users">
        {{ user.name }}
    </a>
</div>
<div>
    <!-- 從原來的app-user換成router-outlet -->
    <!-- <app-user></app-user> -->
    <router-outlet></router-outlet>
</div>