URLとリンクでコンポーネント表示を切り替える「Angular 2」のルーター

次世代Webアプリケーションフレームワーク「Angular」の活用 第5回

ルーターでコンポーネントにパラメーターを渡す

　ルーターでコンポーネントを切り替えるときに、コンポーネントにパラメーターを渡すことができます。この方法を、図2のサンプル（angular-002-router2）で説明します。このサンプルでは、図中（1）の画面上部リンクに設定されたパスや、（2）のテキストボックスの値から、パラメーターをコンポーネントに渡します。

図2　URLからパラメーターを渡すサンプル（angular-002-router2）

URLのパスにパラメーターを含める

　まず、図2（1）のように、URLのパスにパラメーターを含める方法を説明します。ルーターへのルート指定をリスト4のように記述します。

リスト4　パスでパラメーターを渡す設定（angular-002-router2/app/app.module.ts）

RouterModule.forRoot([
  // URLの「:id」部分がパラメーター名を表す
  { path: "comp1/:id", component: Comp1Component },
  （以下略）
])

　パスに指定された「comp1/:id」記述で、パラメーター名としてidを指定しています。この記述に対応させて、リスト5のようにリンクに「/comp1/25」と指定すると、「25」の部分がidパラメーターの値と解釈されて、コンポーネントに渡されます。

リスト5　リンクのパスにパラメーターを設定（angular-002-router2/app/app.component.ts）

<a routerLink="/comp1/25" routerLinkActive="active">...</a>

　リスト5と同じ動作をするリンクを、リスト6のようにも記述できます。

リスト6　別のパラメーター記述法（angular-002-router2/app/app.component.ts）

<a [routerLink]="['/comp1', 25]" routerLinkActive="active">...</a>

　routerLinkを囲む[]は、「=」の右側に記述された内容をJavaScriptとして解釈して、routerLink属性に設定することを表します。設定されるJavaScript配列の第1要素にパス（/comp1）、第2要素にパラメーター（25）を指定します。

　リスト5、6で渡されたパラメーターをコンポーネントで受け取る処理はリスト7です。

リスト7　パラメーターを受け取る処理（angular-002-router2/app/comp1.component.ts）

constructor(private route: ActivatedRoute) {       // ...（1）
  this.route.params.forEach((params: Params) => {  // ...（2）
    this.id = params["id"];                        // ...（3）
  });
}

　（1）のActivatedRouteオブジェクトrouteは、ルートの情報を格納したオブジェクトで、依存性注入によりコンストラクタに渡されます。（2）と（3）で、routeのparamsプロパティからパラメーター名idを指定して値を取り出しています。サンプルコードでは、（3）のthis.idがデータバインディングによって画面に表示されます。

［参考］Angular 2とReactive Extensions

　Angular 2では、内部的にJavaScript版のReactive Extensions（Rx）が利用されています。Rxでは、状態の変化を表すObservableオブジェクトを購読（Subscribe）しておくと、状態が変化したときに処理を実行できます。Rxの詳細については公式ページも参考にしてください。

　リスト7（2）のthis.route.paramsは、パラメーターの変化を表すObservableで、forEachメソッドはObservableを購読する処理、ParamsクラスのparamsはObservableからデータを受け取るオブジェクト（Observer）になっています。

JavaScriptでルーターを操作してパラメーターを渡す

　図2（2）のように、テキストボックスの値をパラメータとして渡すには、リスト8のようにJavaScriptの処理でルーターを操作します。

リスト8　JavaScriptでルーターを操作（angular-002-router2/app/app.component.ts）

/**
 * コンストラクター ...（1）
 */
constructor(private router:Router) {
}
/**
 * ボタン押下時の処理 ...（2）
 */
onClickButton(){
  this.router.navigate(["/comp1", this.value1]);
}

　（1）のコンストラクターで、ルーター自身を表すRouterオブジェクトrouterを依存性注入で受け取ります。ボタン押下時の処理（2）で、router.navigateメソッドにパス（/comp1）とテキストボックスの値（this.value1）を含む配列を指定して実行すると、ルーターがコンポーネントにパラメーターを渡して画面切り替えを行います。リスト8で渡されたパラメーターを受け取る処理は、リンクの場合と同一（リスト7）です。

複数のパラメーターを渡す方法

　サンプル2ではパラメーターの数が1個でしたが、複数のパラメーターを同時に渡す方法もあります。リンクではリスト9のように、routerLink属性の配列第2要素に、複数のパラメーターを含むJavaScrictオブジェクトを指定します。

リスト9　複数のパラメーターを渡すリンク（angular-003-router3/app/app.component.ts）

<a [routerLink]="['/comp1', {'id': 1234, 'msg': 'Hello'}]"
  routerLinkActive="active">...</a>

　JavaScriptではリスト10のように、router.navigateメソッドに渡す配列の第2要素にJavaScriptオブジェクトを指定します。

リスト10　複数のパラメーターを渡すJavaScript処理（angular-003-router3/app/app.component.ts）

this.router.navigate(["/comp1", {"id": this.value1, "msg": this.value2}]);

　リスト9、10を含んだサンプル（angular-003-router3、図3）の詳細は、ダウンロードできるサンプルコードを参照してください。

図3　複数のパラメーターを渡すサンプル（angular-003-router3）