如何在[routerLink] angular 2中传递路由参数

Question

我正在尝试用角度2创建一个应用程序,并且想要传递params来标记[routerLink]中的一个,我想要像这样的链接:

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

我不知道如何传递cell模板......

Answer 1

你可以用工作queryParams与工作routerLink,以建立的url.例如:

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

这将构建一条路线http://localhost:3000/profiles?min=45&max=50&location=29923

祝好运.

Answer 2

如果要使用angula2 beta，则必须在进行路由时发送这样的参数。

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

并且在接收端，您必须使用来获取参数RouteParams。

如果要使用angular2 RC，则必须使用螺母，RouteSegment而不是RouteParams在angular2 RC 中使用。像这样 ：-

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 { }