Angularでの基本的なルーティング設定

では、ルーティングを設定しましょう。ブラウザのアドレスバーにURL /aaaa/が入力された場合には最初のコンポーネントが表示され、/bbbb/が入力された場合には2番目のコンポーネントが表示されるようにします。

この設定は、ファイル app.routes.tsで行います。まずはコンポーネントをインポートする必要があります:

import { AaaaComponent } from './aaaa/aaaa.component';
import { BbbbComponent } from './bbbb/bbbb.component';

次に、どのURLがどのコンポーネントに対応するかを指定する必要があります。このためには、ルート（routes）を含む特別なオブジェクトの配列を作成します。各オブジェクトには、URL（末尾のスラッシュなし）を指定するキー pathと、そのURLで表示されるコンポーネントを指定するキー componentがあります:

export const routes: Routes = [
	{ path: 'aaaa', component: AaaaComponent },
	{ path: 'bbbb', component: BbbbComponent },
];

ただし、ルーティングの設定だけでは不十分です。親コンポーネントに、私たちのコンポーネントが表示される場所を指定する必要があります。これについては次のレッスンで取り組みます。

ファイル app.routes.ts でルーティングを設定してください。