Angular2 - 選択したテーブル値にrouterLinkパラメータを追加する

Question

私は、angle2コンポーネントのHTMLで作成したテーブルのlead値にrouterLinkを添付しました。そのテーブル値をクリックすると、routerLinkは次のコンポーネントに送信するだけでなく、選択した値を次のコンポーネントに渡すようにします。それはレコードのページに送信されるように、現在のコード

<a [routerLink]="['/Records']" ><td> {{Member.Name}} <td></a> 

の

例は、私は、しかし、私はそのコンポーネントに名前を送ってくださいどのように私は私がしようとしている特定のレコードを表示することができるように、リンクを持っています表示する？

Answer 1

はurlにルーティングパラメータを追加してからActivatedRouteを使用してその値にアクセス。

ルート定義

{ path: "Records/:name", component: RecordsComponent } 

リンク

<a [routerLink]="['/Records', Member.Name]" ><td> {{Member.Name}} <td></a> 

ゲットバリュー

@Component({ 
    ... 
}) 
export class RecordsComponent implements OnInit { 

    constructor(private _route: ActivatedRoute) { } 

    ngOnInit(){ 
     this._route.params.subscribe((params) => { 
     var recordName = params["name"]; 
     //load record data 
    }); 
} 

Answer 2

このようなあなたのルートを定義します宣言

{ path: 'Records/:id', component: xxx } 

：プログラムで

<a [routerLink]="['/Records', Member.name]">{{ Member.name }}</a> 

：

goToMemberDetails(name) { 
    this.router.navigate(['/Records', name]); 
}