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

});