Angularにおける子ルート

ルーティングで既に使用されているコンポーネントの中に、 さらに子コンポーネントが存在する場合があります。 これらの子コンポーネントもルーティングを通じて 表示されるように設定することが可能です。

例として、Aaaaというコンポーネントがあるとします。 このコンポーネントにはURL /aaaa/でアクセスします。 さらに、ChixとChiyという2つの子コンポーネントを作成しましょう。 これらはAaaaコンポーネントのビュー内で表示されます。 Aaaaには独自のrouter-outletタグがあり、 URLに応じてどちらかの子コンポーネントがその中に表示されます。

では、上述の内容を実装してみましょう。

最初の子コンポーネントを作成します：

terminalng generate component chix

2番目の子コンポーネントを作成します：

terminalng generate component chiy

個別の子ルートを定義します：

app/app.component.tslet childRoutes: Routes = [
  { path: 'chix', component: ChixComponent },
  { path: 'chiy', component: ChiyComponent },
];

これらをAaaaコンポーネントのルートに子ルートとして追加します：

app/app.component.tsconst appRoutes: Routes = [
  {
    path: 'aaaa',
    component: AaaaComponent,
    children: childRoutes
  },
];

親コンポーネントのルートのパスが子ルートのパスの先頭になります。 これは、子コンポーネントが以下のURLでアクセス可能になることを意味します： /aaaa/chix と /aaaa/chiy。

次に、Aaaaコンポーネントを設定しましょう。 ルーティング用のタグをインポートします：

app/aaaa/aaaa.component.tsimport { RouterOutlet } from '@angular/router';

デコレーターに記述します：

app/aaaa/aaaa.component.ts@Component({
  ......
  imports: [RouterOutlet],
  ......
})

ビューにタグを挿入します：

app/aaaa/aaaa.component.html<p>動作しています</p>
<router-outlet></router-outlet>

これで、子コンポーネントにそれぞれのURLでアクセスできるようになり、 これらのコンポーネントが表示されるようになります。試してみてください！