как передать параметры маршрута в [routerLink] angular 2

Я пытаюсь создать приложение с angular 2 и хочу передать параметры для тега a в [routerLink], я хочу craete ссылку, как это:

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

Я не знаю, как передать cell в шаблоне...

7
angular angularjs javascript typescript

5 ответов

если вы собираетесь использовать 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 { }
4

вы можете работать с queryParams работает с routerLink to построить на url. Например:

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

Это построить маршрут как http://localhost:3000/profiles?min=45&max=50&location=29923

Удачи.

7

вы можете попробовать код ниже: Ваш файл ts будет выглядеть так:

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

и в вас html файл,

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

в Angular2 поддерживает как параметры запроса, так и переменные пути в маршрутизации.

как использовать:

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

и в компоненте:

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

затем показано в url, как вы хотите /auth/signup?cell=1654654654

NB:

если в вашем пути содержится ячейка в компоненте в качестве параметров, таких как:/auth/signup/:cell и routelink, как:[routerLink]="['Signup', {cell: '1654654654'}]" тогда url будет отображаться как:auth/signup/1654654654

1

принятый ответ устарел, и ИМХО не отвечает на вопрос.

однако вопрос не ясен: "параметры маршрута" находятся в путь часть URL, но вопрос был о "query params", которые находятся после '?' (вопросительный знак.)

таким образом, ответ на вопрос ответ @Akash: вы должны использовать

[queryParams]="{name: value}"

в шаблоне.

таким образом, этот якорь будет ссылаться на /path/with/myparam?cell=1654654654:

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