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

Question

我正在尝试设置路由，以便当用户单击某个名称时，应用程序会导航到正确的组件，并使用传入的正确 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/3249aae3d4c9a​​s7ca0623781

我得到的具体错误是：

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

我在这里缺少什么？

Answer 1

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

1. 您正在“两次”导航。 两者都在锚标记中，然后在 onSelect 中。 两个都不需要，选一个。 我建议您使用 [routerLink]，除非您确实需要在导航前做其他事情。

2. 您没有以正确的方式传递 ID。 它应该采用以下形式：

   ['../', { id: riskId, foo: 'foo' }]

或者在你的情况下：

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

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

更新：

我应该多加注意。 您变得未定义，因为“人”不是具有 ID 的对象。 使用“record.id”是因为您使用“record”作为包含人员 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)

假设您的网址如下所示

http://localhost:4200/person/3249aae3d4c9a​​s7ca0623781

执行上述代码后，您在组件中的 id 应为 3249aae3d4c9a​​s7ca0623781。

Answer 3

所以，最后，我正确地构建了路由，但是，正如博扬和鲁道夫正确指出的那样，问题在于需要将“记录”作为第二个参数而不是“人”传入，因为这就是我的方式解析来自 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 的最佳方式。

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

1. 从角度路由器导入路由器

   从“@angular/router”导入{路由器}；

2. 在构造函数中使用路由器类清除变量

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

3. 在点击事件上调用一个函数（假设它是 onClick()）；

4. 在里面点击写代码

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

});