【Angular Router】画面遷移でオブジェクトを渡す

はじめに
環境
実装
参考サイト

はじめに

Angular Routerを使ってA画面からB画面に遷移する時に、B画面に単一の値ではなく、オブジェクトを渡したい時にどのような書き方をすればいいかまとめました。

環境

Angular CLI: 8.3.20
Node: 12.13.1
OS: darwin x64
Angular: 8.2.14

実装

メモのUpsert画面に画面遷移でオブジェクトを渡す処理を実装していきます。

URIの設定

まず、メモのUpsert画面のURI(/home/upsert)をAppRoutingModuleを作成することで設定します。

app-routing.module.ts

// ...省略

// メモのUpset画面のURIを設定する
const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthenticationGuard],
    children: [
      { path: '', redirectTo: 'upsert', pathMatch: 'full' },
      {
        path: 'upsert',
        component: MemoUpsertComponent,
        canActivate: [AuthenticationGuard]
      }
    ]
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

オブジェクトを遷移先の画面に渡す

selectedMemoIdとselectedFolderIdのプロパティーをもつオブジェクトparamを作成して、メモUpsert画面に遷移している処理です。なお、遷移先の画面にオブジェクトを渡しています。

    const param = {
      selectedMemoId: id,
      selectedFolderId: this.selectedFolderId
    };
    // メモUpsert画面に遷移する
    this.router.navigate(['/home/upsert', param]);

上記の処理を実施したときのURIは下記のようになります。

localhost:4200/home/upsert;selectedMemoId=9BE2uHckWqH;selectedFolderId=MqDAWFH7R4

オブジェクトとして渡している各プロパティーが名前=値の形式でセミコロン(;)区切りで渡されていることがわかります。このように、オブジェクトの値を渡すと、URIがクエリパラメーター表記(home/upsert/42)ではなく、マトリクスURI(Matrix URI)表記になります。

遷移先の画面でオブジェクトを受け取る

渡されたオブジェクトを遷移先の画面で受け取るには、下記のようにparams.getでオブジェクトのプロパティー名を指定してあげると遷移先のコンポーネント上でその値を使えるようになります。

memo-upsert.component.ts

// ...省略

    this.route.paramMap.subscribe((params: ParamMap) => {
      this.selectedMemoId = params.get('selectedMemoId');
      this.selectedFolderId = params.get('selectedFolderId');
    });
}