withComponentInputBindingでURLパス値を設定[Angular]

はじめに

Angularの新しいバージョンでは、ルーティング制御でwithComponentInputBinding()を使うことで、URLのパスの一部(URLパラメータ)を、@Inputで取得できるようになりました。

今回はそれについて解説していきます。
バージョンはAngular 18です。

app.config.tsファイルで、withComponentInputBindingの設定を入れます。

export const appConfig: ApplicationConfig = {
  providers: [
    ~
    provideRouter(routes, withComponentInputBinding()),
  ]
};

次に、app.routes.tsファイルで、パス設定をしていきます。

export const routes: Routes = [
    { path: 'product/:id', component: ProductComponent },
];

今回の目的であるURLパラメータは、product/:idの部分で設定しています。

ルート先のコンポーネントを作成します。

export class ProductComponent {
  @Input()
  id!: string;
}

ここで、@Input()をつかって、 product/:id のidを宣言すれば、ルート切替時にURLパラメータから、値をこの変数に設定されます。

画面で確認するために、コンポーネントのテンプレート側にidのデータを表示させてみます。

<h2>Product ID: {{ id }}</h2>

「http://localhost:4200/product/11」のURLを入力してサイトを開いたら、
しっかりとURLのパラメータが表示されていることを確認できました。