2017年01月08日

Angular2のRouting2

Angular2のRoutingで基本的なルーティングの解説をしたけどもう少し高度なルーティングpath設定時にはredirectToで転送用のアドレスが設定できたり、:idといった形でパラメーターの設定ができます。

import { RouterModule }   from '@angular/router';

@NgModule({
...
imports: [
RouterModule.forRoot([
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{
path: 'list',
component: ListComponent
},
{
path: 'detail/:id',
component: DetailComponent
}
])
]
...
});


値の受取は@angular/routerよりParamsをinportしておくとthis.route.paramsよりRxJSで取得ができる。

import { Component, Input ,OnInit} from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';

export class HeroDetailComponent implements OnInit {
constructor(
private route: ActivatedRoute,
) {}

ngOnInit(): void {
this.route.params
.subscribe((params: Params) => {
console.log(params);//{id:"13"}
});
}
}


詳細へのリンクは[routerLink]="['/detail', hero.id]と言った形で設定する

  <a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]"  class="col-1-4">
<div class="module hero">
<h4>{{hero.name}}</h4>
</div>
</a>


参考:Routing - ts - TUTORIAL
タグ:Angular2
posted by ねこまんま at 17:42 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック