Angularにおける子ルート

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

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

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

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

ng generate component chix

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

ng generate component chiy

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

let childRoutes: Routes = [
	{ path: 'chix', component: ChixComponent },
	{ path: 'chiy', component: ChiyComponent },
];

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

const appRoutes: Routes = [
	{
		path: 'aaaa',
		component: AaaaComponent,
		children: childRoutes
	},
];

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

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

import { RouterOutlet } from '@angular/router';

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

@Component({
	......
	imports: [RouterOutlet],
	......
})

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

<p>動作しています</p>
<router-outlet></router-outlet>

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

説明された子コンポーネントの動作を実装してください。

子コンポーネントを切り替えるリンクを作成してください。