How to pass parameters to routes in angular2.0

Question

I am trying to use the route params but not able to achieve it since when i importing the Routeparams it shows errors,,

My template,

    <h6 class="headingh6 nobottommargin"><a [routerLink]="['User',{{detail.firstname}}]">  {{detail.firstname}} </a></h6>

My componenet

import { Component,OnInit} from '@angular/core';
import { Route, RouteSegment, ROUTER_DIRECTIVES } from '@angular/router';

@Component({
selector: 'User', 
templateUrl: './components/society/society.html',
Directives: [ROUTER_DIRECTIVES]
})
export class User  {
id:any;
 constructor(routeSegment: RouteSegment) {
   this.id = routeSegment.getParam('id'); 
   console.log(this.id);   
 }
}

Can someone help me

My routes

   import {provideRouter, RouterConfig} from '@angular/router';

  import {DemoPage} from './demo-page';

  import {User} from './components/user/user';


   export const routes: RouterConfig = [
   { path: '', redirectTo: '/login', terminal: true },
   { path: 'login', component:Login },
   { path: 'signup', component:SignUp },
   { path: 'demo', component: DemoPage, children: [
     { path: 'user', component:User },
     { path: 'requests', component:Requests },
   ]}
];

 export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)


  ];

Community · Accepted Answer · 2017-05-23 12:32:29Z

2

<h6 class="headingh6 nobottommargin"><a [routerLink]="['User',detail.firstname]">{{detail.firstname}}</a></h6>

Don't use [] together with {{}}. Either one or the other, but not both at the same time.

To get router parameters use

constructor(private route: ActivatedRoute) {
  route.routerState.params.subscribe(p => console.log(p['id'));
}

17 Comments

Günter Zöchbauer Over a year ago

What router version are you using? There is no RouteSegment in the current router version.

MMR Over a year ago

can have any alternative

Günter Zöchbauer Over a year ago

Three are 3 (if you count ngrx router then 4) different routers for Angular2 and each one in different versions. I updated my answer for the V3.0.0-beta.2 (the most current from the Angular2 team) router. The other two routers from the Angular2 team are deprecated.

MMR Over a year ago

When i runned it says error that "Can't bind to 'routerLink' since it isn't a known native property "

Günter Zöchbauer Over a year ago

You need to add @Component({ ..., directives: [ROUTER_DIRECTIVES]})` on components where you want to use <router-outlet> or routerLink.

|

Sufyan Jabr · Accepted Answer · 2016-08-02 05:58:22Z

2

Do you just want to read the Querystring param ?

if yes, use this

constructor(private route: ActivatedRoute) {
      console.log(this.route.snapshot.params.id);
   }

in the import you need this:

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

of course this will work if in the route config you have /:id

answered Aug 2, 2016 at 5:58

Sufyan Jabr

8195 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to pass parameters to routes in angular2.0

2 Answers 2

17 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

17 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related