Question

我正在尝试设置路由，以便当用户点击某个名称时，该应用导航到正确的组件，并传入正确的ID。我已根据我的理解设置了它在Angular 2中工作，但是当我运行它时，我得到一个“未定义的id”错误。这就是我所拥有的：

在我的组件视图中，相关代码如下所示：

       <td><a [routerLink]="['/person', person.id]">{{record.name.first}} {{record.name.last}}</a></td>

...在我的路线中，我有这个：

{ path: 'person/:id', component: PersonView },

导航到特定“人”的实际网址如下所示：

http://localhost:4200/person/3249aae3d4c9as7ca0623781

我得到的具体错误是：

原始例外：无法读取未定义的属性“id”

我在这里缺少什么？

Answer 1

您正在做的事情有两个问题：

您正在导航＆＃34;两次＆＃34;。两者都在锚标签中，然后在onSelect中。你不需要两者，选择一个。我建议您使用[routerLink]，除非您在导航之前确实需要做其他事情。
您没有以正确的方式传递ID。它应该是以下形式：

[＆＃39; ../'，{id：crisisId，foo：＆＃39; foo＆＃39; }]

或者在你的情况下：

<a [routerLink]="['/person', { id: record._id }]"...

查看有关路由的Angular 2文档：https://angular.io/docs/ts/latest/guide/router.html

<强>更新

我应该多加注意。你未定义因为＆＃34; person＆＃34;不是具有ID的对象。使用＆＃34; record.id＆＃34;因为你正在使用＆＃34;记录＆＃34;作为包含人员ID的对象，对吗？

Answer 2

您需要阅读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)

假设您的网址如下所示

执行上述代码后，

组件中的id应为3249aae3d4c9as7ca0623781。

Answer 3

所以，最后，我的路由结构正确，但是，正如Boyan和Rudolph正确指出的那样，问题是需要将“记录”作为第二个参数传递，而不是“人”，因为那是我如何从api解析数据。

<td><a [routerLink]="['/person', record._id ]">{{record.name.first}} {{record.name.last}}</a></td>

Answer 4

请注意[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. }

Answer 5

您可以将此id作为Query参数传递，这是传递id的最佳方式。

我将在此描述这样做的步骤。

从angular-router
导入路由器
从@ angular / router＆＃39;;

在构造函数

中使用路由器类清除变量

 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

Answer 6

获取未定义值而不是实际值

步骤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);

}）;

在Angular 2中路由到特定的Id路径

6 个答案: