Angular: Router Resources解説

DRANK

Angular v22.2でリリースされたRouter Resourcesは、長らく期待されていたRouterとSignalsの本格的な統合APIだ。この記事では基本的な使い方を、具体的なユースケースを通して解説する。Router Resourcesの使い方遷移時のブロッキングなデータ取得もっとも典型的なユースケースは、Routerでの遷移時にデータの取得を行い、データが揃うまで待ってからページを移動するものだ。これまではObservable/Promiseベースのデータリゾルバーがそれを担っていたが、同じ役割をSignalベースで置き換える直感的なAPIが導入された。具体的に新旧のコード比較で見てみよう。ページ遷移時にURLパス中のIDを使ってユーザーデータを取得するケースを例にする。従来であれば、次のようにリゾルバー関数を宣言してコンポーネント側は取得済みのユーザーデータを受け取っていた。// app.config.ts import { ApplicationConfig } from '@angular/core'; import { provideRouter, withComponentInputBinding } from '@angular/router'; import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { providers: [provideRouter(routes, withComponentInputBinding())]…