Angular2 - 将 routerLink 参数添加到所选 table 值

Question

我在 angular2 组件的 HTML 中创建的 table 中有一个附加到引导值的 routerLink。单击 table 值后，我希望 routerLink 不仅发送到下一个组件，而且还将所选值带到下一个组件。

当前代码示例

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

我有 link，所以它会发送到“记录”页面，但是如何将名称发送到该组件以便我可以显示我要显示的特定记录？

Answer 1

像这样定义你的路线：

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

声明式：

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

以编程方式：

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

Answer 2

将路由参数添加到 url，然后使用 ActivatedRoute 访问该值。

路线定义

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

Link

<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 3

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

    constructor(private _route: ActivatedRoute) { }

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

Angular2 - 将 routerLink 参数添加到所选 table 值

Angular2 - Adding routerLink parameters to chosen table value

html-table

angular2-routing

routerlink

angular