javascript - Routing to a Specific Id Path in Angular 2 - Stack Overflow

admin管理员组

文章数量:1318153

I am trying to set up routing so that when a user clicks on a certain name, that the app navigates to that correct ponent, with the correct id that is passed in. I have set it up according to how I understand it to work in Angular 2, but I'm getting an "undefined id" error when I run it. This is what I have:

In my ponent view the relevant code looks like this:

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

... And in my routing I have this:

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

The actual url being navigated to for a specific "person" looks like this:

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

The specific error I'm getting is:

ORIGINAL EXCEPTION: Cannot read property 'id' of undefined

What am I missing here?

I am trying to set up routing so that when a user clicks on a certain name, that the app navigates to that correct ponent, with the correct id that is passed in. I have set it up according to how I understand it to work in Angular 2, but I'm getting an "undefined id" error when I run it. This is what I have:

In my ponent view the relevant code looks like this:

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

... And in my routing I have this:

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

The actual url being navigated to for a specific "person" looks like this:

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

The specific error I'm getting is:

ORIGINAL EXCEPTION: Cannot read property 'id' of undefined

What am I missing here?

• javascript
• angular
• typescript
• angular2-routing

Share Improve this question Follow edited Jan 25, 2017 at 18:33 Muirik asked Jan 25, 2017 at 18:21 MuirikMuirik 6,2891010 gold badges6767 silver badges132132 bronze badges 11

• It says you don't have person object containing id property. Do you have? – micronyks Commented Jan 25, 2017 at 18:22
• actually your person don't have any value. what value you are passing in person.id ?? – Amit kumar Commented Jan 25, 2017 at 18:23
• I'm not sure how to pass in the correct value there. How do I determine that? – Muirik Commented Jan 25, 2017 at 18:25
• here is the live plnkr. it will help plnkr.co/edit/5R0URH14ZiVjx81HEZxL?p=preview – Amit kumar Commented Jan 25, 2017 at 18:27
• Where are you reading the id parameter? – Ali Baig Commented Jan 25, 2017 at 18:28

 |  Show 6 more ments

6 Answers 6

Sorted by: Reset to default 3

There are two issues with what you are are doing:

1. You are navigating "twice". Both in the anchor tag, and then in the onSelect. You don't need both, pick one. I remend you use the [routerLink] unless you really need to do something else before you navigate.

2. You are not passing the ID in the right way. It should be in the form:

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

Or in your case:

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

Check out the Angular 2 docs on routing: https://angular.io/docs/ts/latest/guide/router.html

Update:

I should have paid more attention. You are getting undefined because "person" is not the object that has the ID. Use "record.id" because you are using "record" as your object that contains the person ID, correct?

You need to read the parameters in 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){

    }
}

You are passing the parameter correctly with

<a [routerLink]="['/person', person.id]">.. </a>  <= person.id (make sure person is populated or initialized in your ponent)

Assuming your URL looks like this

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

your id in ponent should be 3249aae3d4c9as7ca0623781 after the above code is executed.

So, in the end, I had the routing structured correctly, but, as Boyan and Rudolph correctly pointed out, the issue was with needing to pass "record" in as the second parameter, rather than "person", since that's how I am parsing data from the api.

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

Please note [routerLink]="['/person', person.id]" and 2) both are technically equivalent. So you can use one of them. Not sure how to use person.id in your case. But just for the understanding purpose you can pass static value.

So use either,

1)

 <td><a [routerLink]="['/person', 5]"      //<<---passing static value 5
        (click)="onSelect(person)">{{record.name.first}} {{record.name.last}}</a></td>

OR

2)

onSelect(person) {
    this.router.navigate(['/person', 5]);
}

---

EDIT: answer to your ment.

In order to use dynamic value instead of static, you need to get it from server or set in your javascript/typescript as shown using any variable/object.

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 bee dynamic.
 }
}

And then

onSelect(person) {
        this.router.navigate(['/person', person.id]);  /<<<---now person.id has 5 value.
    }

You can pass this id as Query parameter, its the best and good way to pass id.

Here i will describe the steps to do so.

1. import router from angular-router

   import { Router } from '@angular/router';

2. Decleare a variable with router class inside the constructor

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

3. Call a function on click event (assume it as onClick());

4. Inside on click write the code

   onClick(routeLink,id) { this.router.navigate([routeLink], { queryParams: { p1:id} }); }

(here the function input two parameters as rout link and id as your need you can hard code route link and pass id only.)

Hope this will work for you.

more ref : https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

Getting undefined Value instead of actual value

Step 01 : Routing Module code

{path:'ServicesComplaint/:id', ponent:ServicesplaintComponent}

Step 02 :

Kitchen Appliances Repair

Step 03 :

ngOnInit() {

this.route.params.subscribe(params => {
  this.Id = params["id"];
  alert(this.Id);
  console.log(this.Id);

});

本文标签： javascriptRouting to a Specific Id Path in Angular 2Stack Overflow