我正在尝试设置路由，以便当用户单击某个名称时，应用程序会导航到该正确的组件，并使用传入的正确 id。我已经根据我对它在 Angular 2 中的理解进行了设置，但是当我运行它时我收到"未定义的 id"错误。这是我所拥有的：
在我的组件视图中，相关代码如下所示：
<td><a [routerLink]="['/person', person.id]">{{record.name.first}} {{record.name.last}}</a></td>
。在我的路由中，我有这个：
{ path: 'person/:id', component: PersonView },
特定"人员"导航到的实际 URL 如下所示：
http://localhost:4200/person/3249aae3d4c9as7ca0623781
我得到的具体错误是：
原始异常：无法读取未定义的属性"id"
我在这里错过了什么？
您正在做的事情有两个问题：
-
您正在导航"两次"。在锚标记中，然后在 onSelect 中。你不需要两者，选择一个。我建议您使用[routerLink]，除非您确实需要在导航之前执行其他操作。
-
您没有以正确的方式传递 ID。它的形式应该是：
['../'， { id： crisisId， foo： 'foo' }]
或者在您的情况下：
<a [routerLink]="['/person', { id: record._id }]"...
查看有关路由的 Angular 2 文档：https://angular.io/docs/ts/latest/guide/router.html
更新：
我应该多加注意。您正在未定义，因为"人"不是具有 ID 的对象。使用"record.id"是因为您使用"记录"作为包含人员 ID 的对象，对吗？
您需要读取 ngOnInit 中的参数
import {OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
export class LiveAuctionComponent implements OnInit
{
ngOnInit() {
//read parameters here
this.route.params.subscribe(params => {
this.Id = params["id"];
});
}
constructor(private route: ActivatedRoute){
}
}
您正在正确传递参数
<a [routerLink]="['/person', person.id]">.. </a> <= person.id (make sure person is populated or initialized in your component)
假设您的网址如下所示
http://localhost:4200/person/3249aae3d4c9as7ca0623781
执行上述代码后，您在组件中的 ID 应该是 3249aae3d4c9as7ca0623781。
所以，最后，我正确地构建了路由，但是，正如 Boyan 和 Rudolph 正确指出的那样，问题在于需要将"record"作为第二个参数传递，而不是"person"，因为这就是我从 API 解析数据的方式。
<td><a [routerLink]="['/person', record._id ]">{{record.name.first}} {{record.name.last}}</a></td>
请注意[routerLink]="['/person', person.id]"和2)两者在技术上是等效的。因此，您可以使用其中之一。不确定如何在您的情况下使用person.id。但只是出于理解目的，您可以传递静态值。
所以使用其中之一，
1）
<td><a [routerLink]="['/person', 5]" //<<---passing static value 5
(click)="onSelect(person)">{{record.name.first}} {{record.name.last}}</a></td>
或
2）
onSelect(person) {
this.router.navigate(['/person', 5]);
}
编辑：回答您的评论。
为了使用动态值而不是静态值，您需要从服务器获取它或在javascript/typescript中设置，如使用任何变量/对象所示。
export class app{
constructor{
this.person={id:5} // 5 can be replaced if you try to get the value from the server. That way it will become dynamic.
}
}
然后
onSelect(person) {
this.router.navigate(['/person', person.id]); /<<<---now person.id has 5 value.
}
您可以将此 id 作为查询参数传递，这是传递 id 的最佳和好方法。
在这里，我将描述执行此操作的步骤。
-
从角度路由器导入路由器
从"@angular/路由器"导入 { 路由器 };
-
在构造函数中具有路由器类的变量
constructor(_router: Router) { this.router = _router; } -
在点击事件上调用一个函数（假设它是onClick（））;
-
里面点击写代码
onClick（routeLink，id） { this.router.navigate（[routeLink]， { queryParams： { p1：id} }）; }
（在这里，函数输入两个参数作为路由链接和id，因为您可以硬编码路由链接并仅传递ID。
希望这对你有用。
更多参考 ： https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters
获取未定义的值而不是实际值
步骤01：路由模块代码
{path：'ServicesComplaint/：id'， component：ServicescomplaintComponent}
步骤02 ：
步骤03 ：
ngOnInit（） {
this.route.params.subscribe(params => {
this.Id = params["id"];
alert(this.Id);
console.log(this.Id);
}）;