Search code examples
angularangular-routingangular-routerlink

how to pass route params in [routerLink] angular 2


I'm trying to create an application with angular 2,And Want pass params to tag a in [routerLink],i want craete a link like this :

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

i dont know how to pass cell in template...


Solution

  • If your are going to use angula2 beta then you have to send parameter like this while doing routing.

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

    and than in the receiving side than you have to get parameter via using RouteParams.

    nut if You are going to use angular2 RC than you have to use RouteSegment instead of using 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 { }