How to pass route parameters to [routerLink] angular 2

Question

I'm trying to create an application using angular 2, and you want to pass parameters to mark a in [routerLink], I want you to have this link:

<a href="/auth/signup?cell=1654654654"></a> 

I do not know how to pass cell to the template ...

Answer 1

If you are going to use angula2 beta strong>, then you need to send such a parameter when performing routing.

 <a [routerLink]="['signup',{cell:cellValue}]">Routing with parameter</a> <input type='text' [(ngModel)]='cellValue'> 

and not on the receiving side, then you need to get the parameter using RouteParams .

if you are going to use angular2 RC, instead of using RouteSegment instead of RouteParams in angular2 RC. like this: -

 import { Component } from '@angular/core'; import { Routes, RouteSegment, ROUTER_DIRECTIVES } from '@angular/router'; @Component({ selector: 'about-item', template: `<h3>About Item Id: {{id}}</h3>`, Directives: [ROUTER_DIRECTIVES] }) class AboutItemComponent { id: any; constructor(routeSegment: RouteSegment) { this.id = routeSegment.getParam('id'); } } @Component({ selector: 'app-about', template: ` <h2>About</h2> <a [routerLink]="['/about/item', 1]">Item 1</a> <a [routerLink]="['/about/item', 2]">Item 2</a> <div class="inner-outlet"> <router-outlet></router-outlet> </div> `, directives: [ROUTER_DIRECTIVES] }) @Routes([ { path: '/item/:id', component: AboutItemComponent } ]) export class AboutComponent { } 

Answer 2

You can work with queryParams , which works with routerLink to build a url . For example:

 <a [routerLink]="['/profiles']" [queryParams]="{min:45,max:50,location:29293}"> Search </a> 

This will build a route, for example http://localhost:3000/profiles?min=45&max=50&location=29923

Good luck.

Answer 3

you can try the code below: Your ts file will look like this:

 @Component({ ... }) @Routes([ { path: '/auth/signup?cell=1654654654', component: AuthComponent } ]) export class AppComponent implements OnInit { constructor(private router: Router) {} } 

And in your html file,

 <a [routerLink]="['//auth/signup?cell=1654654654']"></a> 

Answer 4

Angular2 supports both query parameters and path variables in routing.

use as:

 <a [routerLink]="['Signup', {cell: '1654654654'}]">Signup</a> 

and in the component:

 @RouteConfig([ new Route({ path: '/auth/signup', component: SignupComponent, name: 'Signup'}) ]) 

and then shown in the url that you want /auth/signup?cell=1654654654

Note:

If your path contains a cell in the component as parameters like: /auth/signup/:cell and routing like: [routerLink]="['Signup', {cell: '1654654654'}]" , then the URL will look like this: auth/signup/1654654654

Answer 5

The accepted answer is outdated, and IMHO does not answer the question.

However, the question is not clear: "route parameters" are in the path of the URL part, but the question was about "request parameters", which after "?" (question mark).

So, the answer to the question is @Akash answer: you should use

 [queryParams]="{name: value}" 

in the template.

So, this anchor will refer to /path/with/myparam?cell=1654654654 :

 <a [routerLink]="['/path/with/:paramName', {paramName: "myparam"}]" [queryParams]="{cell: 1654654654}" ></a>