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

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

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

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


person Community    schedule 29.05.2016    source источник
comment
Возможный дубликат Angular2 Routerlink: добавить параметры запроса   -  person Dov Benyomin Sohacheski    schedule 29.05.2016


Ответы (5)


Если вы собираетесь использовать бета-версию angula2, вам нужно отправить такой параметр при маршрутизации.

<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 { }
person Pardeep Jain    schedule 29.05.2016
comment
Я не хочу использовать этот способ, но все в порядке, и как это связать? Я хочу, чтобы при вводе параметров входной ячейки связывались в теге. - person ; 29.05.2016
comment
чем просто привязать значение поля ввода к [(ngModel)] и передать эту переменную как routerParameter. @AlirezaValizade смотрите мой обновленный ответ. - person Pardeep Jain; 29.05.2016
comment
` ‹form [ngFormModel]=model (ngSubmit)=submit()› ‹div› ‹input id=cell type=text name=cell ngControl=cell › ‹label for=cell›تلفن همراه‹/label› ‹/div› ‹/form› ‹a [routerLink]=['/SignUp',{cell: model.cell }] ›‹/a›` Я использую FormBuilder и не работаю - person ; 29.05.2016
comment
попробуй этот <form [ngFormModel]="model" (ngSubmit)="submit()"> <div> <input id="cell" type="text" name="cell" ngControl="cell" [(ngModel)]='cellValue'> <label for="cell">تلفن همراه</label> </div> </form> <a [routerLink]="['/SignUp' ,{ cell: cellValue }]" ></a> - person Pardeep Jain; 29.05.2016
comment
ваш пример URL будет выглядеть так: auth/signup/1654654654 не auth/signup?cell=1654654654, потому что вы использовали /item/:id в своем пути - person Shaishab Roy; 29.05.2016
comment
хм, вы правы @shaishabroy, это зависит от нас, как мы хотим отображать URL. - person Pardeep Jain; 29.05.2016

Вы можете работать с 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

Удачи.

person Aakash    schedule 09.11.2016

вы можете попробовать следующий код: Ваш файл 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>
person Tarang Bhalodia    schedule 29.05.2016
comment
Вы можете связать с помощью [(ngModel)] и использовать routeParams - person Tarang Bhalodia; 31.05.2016

В 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 и маршрутная ссылка, например: [routerLink]="['Signup', {cell: '1654654654'}]", тогда URL-адрес будет отображаться как: auth/signup/1654654654

person Shaishab Roy    schedule 29.05.2016
comment
уже упомянул все содержание вашего ответа в существующих ответах, ничего нового не добавил к ответу. - person Pardeep Jain; 29.05.2016
comment
В каком ответе? @PardeepJain - person Shaishab Roy; 29.05.2016
comment
посмотри мой ответ @Shaileshab - person Pardeep Jain; 29.05.2016
comment
какой ответ упоминается, когда URL-адрес отображается как auth/signup/1654654654 и когда auth/signup?cell=1654654654. ты упомянул? @PardeepJain - person Shaishab Roy; 29.05.2016
comment
вопрос не в том, как отображается URL, вопрос в том, как передать параметр, не так ли? - person Pardeep Jain; 29.05.2016
comment
также упомянул, что он хочет, как: /auth/signup?cell=1654654654 верно? - person Shaishab Roy; 29.05.2016
comment
но, поскольку заголовок вопроса предлагает нам how to pass route params in [routerLink] angular 2, я так думаю - person Pardeep Jain; 29.05.2016
comment
хорошо, я думаю, он этого хочет, поэтому я показал этот процесс :) - person Shaishab Roy; 29.05.2016
comment
Спасибо за ваш ответ. Я именно этого и хотел - person ; 31.05.2016
comment
добро пожаловать, и если это помогло, вы можете принять и проголосовать. :) @AlirezaValizade - person Shaishab Roy; 31.05.2016

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

Однако вопрос не ясен: «параметры маршрута» находятся в части URL-адреса path, но вопрос был о «параметрах запроса», которые находятся после «?» (вопросительный знак).

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

[queryParams]="{name: value}"

в шаблоне.

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

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