子路由

有時將檢視或路徑巢狀在另一箇中是有意義的。例如，在儀表板上，你需要多個子檢視，類似於選項卡，但通過路由系統實現，以顯示使用者的專案，聯絡人，訊息等。為了支援這種情況，路由器允許我們定義子路由。

首先我們從上面調整 RouterConfig 並新增子路徑：

import { ProjectsComponent } from '../components/projects.component';
import { MessagesComponent} from '../components/messages.component';

export const appRoutes: RouterConfig = [
  { path: '', pathMatch: 'full', redirectTo: 'login' },
  { path: 'dashboard', component: DashboardComponent,
    children: [
      { path: '', redirectTo: 'projects', pathMatch: 'full' },
      { path: 'projects', component: 'ProjectsComponent' },
      { path: 'messages', component: 'MessagesComponent' }
    ] },
  { path: 'bars/:id', component: BarDetailComponent },
  { path: 'login', component: LoginComponent },
  { path: 'signup',   component: SignupComponent }
];

現在我們已經定義了子路由，我們必須確保這些子路由可以在我們的 DashboardComponent 中顯示，因為那是我們新增子路徑的地方。以前我們已經瞭解到元件顯示在 <router-outlet></router-outlet> 標籤中。類似我們在 DashboardComponent 中宣告瞭另一個 RouterOutlet：

import { Component } from '@angular/core';

@Component({
  selector: 'dashboard',
  template: `
    <a [routerLink]="['projects']">Projects</a>
    <a [routerLink]="['messages']">Messages</a>   
    <div>
      <router-outlet></router-outlet>
    </div>
  `
})
export class DashboardComponent { }

如你所見，我們新增了另一個 RouterOutlet，其中將顯示子路由。通常會顯示具有空路徑的路線，但是，我們設定了重定向到 projects 路線，因為我們希望在載入 dashboard 路線時立即顯示該路線。話雖這麼說，我們需要一個空路線，否則你會得到這樣的錯誤：

Cannot match any routes: 'dashboard'

因此，通過新增空路徑（意味著路徑為空路徑），我們為路由器定義了一個入口點。