Angularで子パスを指定する方法

Angularでは、ルーティングを設定するためにRouterModuleを使用します。子パスを指定するには、childrenプロパティを使用する必要があります。以下のコード例をご覧ください。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
// 他の子ルートを追加することもできます
    ]
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ParentRoutingModule { }

上記のコードでは、ParentComponentが親コンポーネントであり、ChildComponentが子コンポーネントです。routes配列内で親パスと子パスを指定し、それぞれのパスに対応するコンポーネントを指定します。

この例では、/parentを親パスとし、/parent/childを子パスとしています。つまり、/parent/childにアクセスするとChildComponentが表示されます。

このようにして、Angularでは複数の階層を持つルーティングを簡単に設定することができます。必要に応じて、さらに子ルートを追加することも可能です。