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?
Share Improve this question edited Jan 25, 2017 at 18:33 Muirik asked Jan 25, 2017 at 18:21 MuirikMuirik 6,28910 gold badges67 silver badges132 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
6 Answers
Reset to default 3There are two issues with what you are are doing:
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.
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.
import router from angular-router
import { Router } from '@angular/router';
Decleare a variable with router class inside the constructor
constructor(_router: Router) { this.router = _router; }
Call a function on click event (assume it as onClick());
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 :
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
版权声明:本文标题:javascript - Routing to a Specific Id Path in Angular 2 - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742043903a2417674.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论