49. 子ルートとレイアウト — ルートを入れ子にする

ルート定義には children というプロパティがあり、ルートを入れ子にできます。{ path: 'admin', component: AdminLayout, children: [...] } と書くと、/admin/orders のようなURLでは、まず親の AdminLayout が表示され、その中の <router-outlet /> に子のコンポーネントがはめ込まれます。

実務での定番は「レイアウトの共有」です。管理画面の全ページに共通のヘッダーやサイドメニューを付けたいとき、親コンポーネントに共通部分と <router-outlet /> を置けば、子ページを切り替えても共通部分は残り続けます。各ページに同じヘッダーをコピーする必要がなくなります。

つまずきやすいのは <router-outlet /> の置き忘れです。親のテンプレートにアウトレットがないと、URLは変わるのに子の画面がどこにも表示されません。また、子の path は親からの相対で書くため、children の中に 'admin/orders' と親のパスを重ねて書かないよう注意しましょう。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Routes } from '@angular/router';
import { AdminLayout } from './admin/admin-layout';
import { OrderList } from './admin/order-list';
import { CustomerList } from './admin/customer-list';

export const routes: Routes = [
  {
    path: 'admin',
    component: AdminLayout, // 共通ヘッダーを持つ親
    children: [
      // 親からの相対パスで書く(/admin/orders になる)
      { path: 'orders', component: OrderList },
      { path: 'customers', component: CustomerList },
    ],
  },
];

// AdminLayout のテンプレート:
// <header>管理画面</header>
// <router-outlet />  ← 子ルートはここに表示される

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗