angular ルーティング値転送の補足説明

Angular では、さまざまな方法でルート間で値を渡すことができます。一般的な方法をいくつか示します。

1. ルート パラメーター (ルート パラメーター): ルーティング設定でパラメーターを定義し、ナビゲーション時にパラメーターを渡します。ターゲット コンポーネントでは、ActivatedRoute サービスを使用してこのパラメータの値を取得できます。

// 路由配置
{ path: 'user/:id', component: UserComponent }

// 导航
this.router.navigate(['/user', userId]);

// 在 UserComponent 中获取参数值
constructor(private route: ActivatedRoute) {
  this.route.params.subscribe(params => {
    const userId = params['id'];
    // 使用 userId 进行相应的操作
  });
}

2. クエリ パラメータ: ナビゲーション URL にクエリ パラメータを追加して値を渡します。ターゲット コンポーネントでは、ActivatedRoute サービスを使用してクエリ パラメーターの値を取得できます。

// 导航
this.router.navigate(['/user'], { queryParams: { id: userId } });

// 在 UserComponent 中获取查询参数值
constructor(private route: ActivatedRoute) {
  this.route.queryParams.subscribe(params => {
    const userId = params['id'];
    // 使用 userId 进行相应的操作
  });
}