Angular 2 - Pass parameters to Route

Question

I have a <a> tag like below,

<a [routerLink]="[/Person']">Person</a>

So I want to pass the person.id to this /Person router. How can I pass it & handle it on @RouteConfig like params in Angular 1

There is no `@RouteConfig`. What Angular2 version are you using? — Günter Zöchbauer, Oct 14 '16 at 14:22

Kamil Myśliwiec · Accepted Answer · 2019-07-19T17:35:51.513

27

Pass to router link:

<a [routerLink]="['/Person', person.id]">Person</a>

Handle in component:

this.route.params.subscribe(
   (params: Params) => {
      this.id = params['id']; 
   }
);

Second way:

this.route.params.forEach(
   (params: Params) => {
       this.id = params['id'];
   }
);

In this example you have to inject ActivatedRoute (e.g as route property) like that:

constructor(private route: ActivatedRoute) {}

If you subscribe - it is important to unsubscribe Observable to prevent memory leaks.

Full example:

export class SimpleComponent implements OnInit, OnDestroy {
    private id: number;
    private route$: Subscription;
    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        this.route$ = this.route.params.subscribe(
            (params: Params) => {
                this.id = +params['id']; // cast to number
            }
        );
    }
    ngOnDestroy() {
        if (this.route$) this.route$.unsubscribe();
    }
}

Config:

export const routes = [
    ...
    { path : 'Person/:id', component : ...},
    ...
];

Also, @RouteConfig is deprecated.

edited Jul 19 '19 at 17:35

answered Oct 14 '16 at 14:24

Kamil Myśliwiec

8,548
2
34
33

1

Good answer, couple of comments. First, you're missing the opening single-quote in the `'/Person'`. Second, according to [Routing and Navigation](https://angular.io/docs/ts/latest/guide/router.html#!#route-parameters), you can access the parameters also like this: `ngOnInit() { this.route.params.forEach((params: Params) => { let id = +params['id']; // (+) converts string 'id' to a number });` Finally, if you're using subscribe, remember to unsubscribe on the ngOnDestroy. – jjokela Oct 14 '16 at 14:38
Thanks for your attention about the single quote - I edited post. About unsubscribe - this is obvious. It is important to do it to prevent memory leaks. I will add it to answer :) – Kamil Myśliwiec Oct 14 '16 at 14:43
**Handle in component:** `this.route.params.subscribe( (params : Params) => { this.id = params["id"]; } );` this thing, it will be writtern in that class where the user will be navigated, that is, in its ngOnInit() method. Right? – Tk1993 Oct 06 '17 at 07:36
Also, where can i find this **Subscription** class. It is throwing error as cannot find.. – Tk1993 Oct 06 '17 at 07:41

score 4 · Answer 2 · edited Jul 22 '18 at 11:46

4

You can pass it like

<a [routerLink]="['/Person', propertyWithId]">Person</a>

edited Jul 22 '18 at 11:46

codefreaK

3,584
5
34
65

answered Oct 14 '16 at 14:22

Günter Zöchbauer

623,577
216
2,003
1,567

score 2 · Answer 3 · answered May 29 '17 at 11:07

In my case, directive [routerLink] didn't work for me. So, I had to do it programmatically.

Component template:

<a (click)="goToEdit(person.id)" >Edit</a>

Component Class:

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

export class PersonComponent{

    constructor(private _route: Router){ }

    goToEdit(id){
        this._route.navigate(['Person/' + id]);
    }

}

Angular 2 - Pass parameters to Route

3 Answers3

Linked