コンポーネントとは
コンポーネントとは、ビュー(View)を定義し、制御するものである。
上図のようにコンポーネントはビューの定義から制御まで、一貫してビューを管理する。
以下のようにコンポーネント間で親子関係を構築できる。
親コンポーネントが子コンポーネントを含み、データの受け渡しやイベントのやり取りを行う。
親子関係をもつ目的
コンポーネントの親子関係を持つことで、以下のような利点がある。
-
コードの再利用性向上: 共通のUIパーツをコンポーネント化することで、複数の場所で再利用できる
-
役割の分離: それぞれのコンポーネントが独自の役割を持つため、保守性が向上する
-
データの適切な管理: 親から子へのデータ受け渡し(
Input
)、子から親へのイベント通知(Output
)を活用することで、データの流れを制御しやすくなる
ルーターを使った親子関係
Angularのルーターを使用すると、URLパスに応じて異なるコンポーネントを表示できる。loadChildren
を使うことで、モジュール単位でルーティングを管理し、親子関係を構築できる。
親ルート(app.routes.ts)
app.routes.ts
const routes: Routes = [
{ path: '', component: HomeComponent },
{
path: 'dashboard',
loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
},
{ path: '**', component: NotFoundComponent }
];
子ルート(dashboard.module.ts)
dashboard.module.ts
const routes: Routes = [
{ path: '', component: DashboardHomeComponent },
{ path: 'details', component: DashboardDetailsComponent }
];
このようにapp.routes.ts
のdashboard
パスにアクセスすると、dashboard.module.ts
内のルーティングが適用され、親子関係が成立する。