URLのパスを取得する｜AngularでWebサイト作成

ntuti

URLのパスを取得する｜AngularでWebサイト作成

Angularの学習の為に、AngularでWebサイトを作ってみることにしました（Angularのバージョンは4.3.6です）。
適宜作業内容をまとめていきます。

基本的な部分は公式チュートリアルなどを参考にしながら進めています。

例えばIDが100のアイテムを表示するURLを以下のようにしたり、
http://test.com/item/100
ユーザ情報を表示するURLを以下のようにしたりすることがあります。
http://test.com/user/100

こういった場合「100」の部分をAPIへのリクエストに投げる必要があります。
今回はこのようなURLの一部分をコンポーネント側で取得するサンプルプログラムを作成してみます。

開発環境

・OS：Windows8.1 64bit
・node：v7.2.1
・npm：4.0.5
・Angular：4.3.6
・開発ツール：VisualStudioCode

Angularサンプルプログラム

routing

まずはroutingを設定しておきます。
app-routing.module.ts

const routes: Routes = [
  {
	path: 'sample/:id',
	component: SampleComponent
  },
  ～省略～
]
@NgModule({
    imports:[
        RouterModule.forRoot(routes)
    ],
    exports:[
        RouterModule
    ]
})
export class AppRoutingModule{}

上記のように「:id」としてある部分を取得します。
app.module.tsで上記AppRoutingModuleをimportsに追記しておきます。

次にコンポーネント側です。
以下のようにswitchMapを使って取得することができます。
Component側

import 'rxjs/add/operator/switchMap';
～省略～
export class SampleComponent implements OnInit {
  ngOnInit() {
    this.route.params
    .switchMap((params: Params) => this.sampleService.getSample(+params['id']))
    .subscribe((sample: Sample) => {
      this.sample = sample;
    });
  }
}