Angular コンポーネントの親子関係

コンポーネントとは

コンポーネントとは、ビュー(View)を定義し、制御するものである。

上図のようにコンポーネントはビューの定義から制御まで、一貫してビューを管理する。

以下のようにコンポーネント間で親子関係を構築できる。

親コンポーネントが子コンポーネントを含み、データの受け渡しやイベントのやり取りを行う。

親子関係をもつ目的

コンポーネントの親子関係を持つことで、以下のような利点がある。

• コードの再利用性向上: 共通のUIパーツをコンポーネント化することで、複数の場所で再利用できる

• 役割の分離: それぞれのコンポーネントが独自の役割を持つため、保守性が向上する

• データの適切な管理: 親から子へのデータ受け渡し（Input）、子から親へのイベント通知（Output）を活用することで、データの流れを制御しやすくなる

ルーターを使った親子関係

Angularのルーターを使用すると、URLパスに応じて異なるコンポーネントを表示できる。loadChildren を使うことで、モジュール単位でルーティングを管理し、親子関係を構築できる。

親ルート（app.routes.ts）

app.routes.ts

// app.routes.ts
const routes: Routes = [
  // 'dashboard' パスにアクセスすると、DashboardModule を遅延ロードする
  {
    path: 'dashboard', 
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) 
  }
];

子ルート（dashboard.module.ts）

dashboard.module.ts

const routes: Routes = [
  // '/dashboard' にアクセスしたときに表示されるコンポーネント
  { path: '', component: DashboardHomeComponent },

  // '/dashboard/details' にアクセスしたときに表示されるコンポーネント
  { path: 'details', component: DashboardDetailsComponent }
];

このようにapp.routes.ts のdashboardパスにアクセスすると、dashboard.module.ts内のルーティングが適用され、親子関係が成立する。