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

Posted 2023-03-05

【中文标题】Angular2 - 将 routerLink 参数添加到所选表值

【英文标题】：Angular2 - Adding routerLink parameters to chosen table value

【发布时间】：2017-07-18 14:53:52

【问题描述】：

我有一个 routerLink 附加到我在 angular2 组件的 html 中创建的表中的前导值。单击该表值后，我希望 routerLink 不仅发送到下一个组件，还将选择的值带到下一个组件。

当前代码示例

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

我有链接，因此它正在发送到记录页面，但是如何将名称发送到该组件，以便我可以显示我要显示的特定记录？

【参考方案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
   );

【讨论】：

我需要使用什么导入才能实现 OnInit？

从'@angular/core'导入OnInit；

我已经正确实现 OnInit 并且不再出现错误，但是，我收到另一个错误，提示它找不到名称 ngOnInit。

是的，做到了！现在还有一个问题：有没有一种方法可以在 ngOnInIt 函数之外使用该 recordName 变量？ （我正在尝试将该名称发送到同一组件中的 api 调用函数）

谢谢你，泰迪，我永远欠你的债。

【参考方案2】：

这样定义你的路线：

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

声明式：

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

以编程方式：

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

【参考方案3】：

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

    constructor(private _route: ActivatedRoute)  

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