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
【Angularの最新記事】
- Angularの構造ディレクティブ(St..
- AngularのRenderer2でDO..
- AngularでネイティブのDOMにアク..
- AngularでDirectiveの作成..
- Angularでカスタムパイプを作る
- AngularでURLのパラメーターを取..
- AngularでN文字以上をトリミング
- AngularでBehaviorSubj..
- Angularで「WARNING .. ..
- angularでdebounce
- angular cliで作ったプロジェク..
- Angular2でformControl..
- Angular2のloadChildre..
- ElementRef - @angula..
- Angular 2のng2-dragul..
- Angular 2のDatePipe
- Angular2のRouting
- Angular2のライフサイクルメソッド..
- Angular2のサービス
- Angular2のコンポーネント