新增 routing module

ng g m app --routing  
ng g m layout --routing

設定 lazy loading 對應的 module

透過 loadChildre 屬性的 import 與 then 方法，使 angular 知道什麼 route 可以載入對應的 module。

• import：設定載入 module 的路徑
• then：設定載入的 module

lazy loading 的功能是當 angular 進入某個 component 後，才會開始載入「所需的 module」，而不是在 angular 運行完成後，便載入「所有」會使用到的 module。這對 browser 來說可減輕一開始就載入大量資源的負擔。

const routes: Routes = [
  {
    path: 'layout',
    loadChildren: () => import('./layout/layout.module').then(m => m.LayoutModule)
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

設定 route 對應的 component

當 path 為 content 時，angular 才會創建 ContentComponent。

const routes: Routes = [
  { path: 'content', component: ContentComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LayoutRoutingModule { }

設定 nested routes

若 route 為多層結構的話，可使用 children 方法設定下一層 route。

const routes: Routes = [
  {
    path: 'content',
    component: ContentComponent,
    children: [
      {
        path: 'layout',
        loadChildren: () => import('./layout/layout.module').then(m => m.LayoutModule)
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LayoutRoutingModule { }

載入路由 module

在 LayoutModule 載入已設定完成的路由 module，如 LayoutRoutingModule

@NgModule({
  imports: [
    LayoutRoutingModule
  ],
})
export class LayoutModule { }

加入 router-outlet 標籤

angular 會依據「路由」將對應的 component 的 html 取代 router-outlet 標籤

<router-outlet></router-outlet>

設定 routerLink

引入 RouterModule

@NgModule({
  imports: [
    RouterModule
  ],
  exports: [
    RouterModule
  ]
})
export class SharedModule { }

在標籤上加入 routerLink，並「點擊」進行路由切換

<a routerLink="/">Home</a>