Angular2でComponentにURLのパラメータを引き渡す方法
前回の記事の続きです。 次はURLに指定されたパラメータをコンポーネント側で受け取って表示してみます。
以下のようなリクエストを送るものとします。
http://127.0.0.1:8080/#/friend/1234
この「1234」をコンポーネント側に渡したい。
そのためにはどうしたらいいか?
まずはRoutesにパスを設定します。
app.routing.ts
import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from "./home"; import { TestComponent } from "./test"; import { FriendComponent } from "./friend"; const routes: Routes = [ {path: '', component: HomeComponent}, {path: 'test', component: TestComponent}, {path: 'friend/:id', component: FriendComponent} ]; export const routing = RouterModule.forRoot(routes);
以下の
{path: 'friend/:id', component: FriendComponent}
で、「#/friend/1234」の部分を定義しています。
:idに「1234」が対応します。
引き渡す側はこんな感じ。
friend.ts
import {Component} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; @Component({ selector: 'friend', template: '<h1 class="friend">Friend ID is {{friendId}}</h1>', styles: ['.friend {background:red}'] }) export class FriendComponent { friendId: string constructor(route: ActivatedRoute) { this.friendId = route.snapshot.params['id']; console.log("friend id = " + this.friendId); } }
こうすれば、以下のように表示されます。