プログラマーの調べ物

プログラマーが調べ物をするときに役に立つサイトを作ります。

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);
    }
}

こうすれば、以下のように表示されます。 f:id:sho322:20170411071616j:plain