路由到角2中的特定Id路径

我想设置路由，以便当用户单击某个名称时，该应用导航到正确的组件，并传入正确的ID。根据我对Angular 2的理解来设置它，但是当我运行它时出现“未定义的id”错误。这是我有：路由到角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

我得到特定的错误是：

原始异常：无法读取属性未定义

“身份证”我缺少的是在这里吗？

来源

2017-01-25 Muirik

它说你没有包含id属性的person对象。你有？ – micronyks

其实你的人没有任何价值。你在person.id中传递了什么值？ –

我不知道如何传递正确的值。我如何确定？ – Muirik

所以，在最后，我不得不路由结构正确，但是，柏彦和鲁道夫正确地指出，问题是对于要在传递“record”作为第二个参数，而不是“人”，因为这是我从api解析数据的方式。

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

来源

2017-01-25 19:38:26 Muirik

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

来源

2017-01-25 18:31:19 micronyks

好的，我删除了不必要的onSelect方法。 Re：传入的值，静态时很容易，但是如何传递动态值？ – Muirik

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

假设你的URL看起来像读取参数这

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

在执行上面的代码后，你在组件ID应该是3249aae3d4c9as7ca0623781。

来源

2017-01-25 18:37:00

两个想法：所以route.params.subscribe在这里是必要的吗？另外，这里指的是“auctionId”是什么？ – Muirik

我从我的代码段中复制了这部分，我编辑了auctionId作为Id，这是我的角度组件中的变量 –

订阅将随时更新参数的值，因此我不确定这里是否必要但不会造成伤害 –

有两个问题与你在做什么：

您正在浏览“两次”。都在锚标记中，然后在onSelect中。你不需要两个，挑一个。我建议你使用[routerLink]，除非在导航之前你确实需要做其他事情。
您没有以正确的方式传递ID。它应该在的形式：

[ '../'，{ID：crisisId，FOO： '富'}]

或者你的情况：

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

检查出来路由角2个文档：https://angular.io/docs/ts/latest/guide/router.html

更新：

我应该多加注意。你得到未定义的，因为“人”不是具有ID的对象。使用“record.id”是因为您使用“记录”作为包含人员ID的对象，是否正确？

来源

2017-01-25 18:37:09

我已移除onSelect方法，因为我同意，这是没有必要的。我按照你的建议改变了routerLink，但它仍然没有定义。 – Muirik

更新了我的答案，我的这个愚蠢的错误没有注意到这一点。 –

谢谢。我现在很近。你对“记录”是正确的。现在我正在使用这个： {{record.name.first}} {{record.name.last}} – Muirik

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

这里我将介绍这样做的步骤。从角路由器

进口路由器

进口{路由器}从 '@角/路由器';

Decleare在构造函数中使用的路由器类变量

constructor(_router: Router) { 
    this.router = _router; 
    }

呼叫click事件的函数（假设它的onClick（））;
里面上点击写代码

的onClick（routeLink，ID）{ this.router.navigate（[routeLink]，{queryParams：{P1：ID}}）; }

（这里的函数输入两个参数为击溃链接和ID作为你的需要，你可以硬编码路径路段，只通过ID）。

希望这会为你工作。

来源

2017-01-25 18:43:03

路由到角2中的特定Id路径

回答

相关问题