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


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

まとめ

冒頭に述べたような詳細ページを表示したりする際には使える方法だと思いました。
switchMapにはもっと調べてみたいと思います。

  • このエントリーをはてなブックマークに追加

PAGE TOP