Я пытаюсь создать приложение с angular 2, и хочу передать параметры для тега a в [routerLink], я хочу создать ссылку, подобную этой:
<a href="/auth/signup?cell=1654654654"></a>
я не знаю, как передать cell
в шаблон...
Я пытаюсь создать приложение с angular 2, и хочу передать параметры для тега a в [routerLink], я хочу создать ссылку, подобную этой:
<a href="/auth/signup?cell=1654654654"></a>
я не знаю, как передать cell
в шаблон...
Если вы собираетесь использовать бета-версию 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 { }
[(ngModel)]
и передать эту переменную как routerParameter. @AlirezaValizade смотрите мой обновленный ответ.
- person Pardeep Jain; 29.05.2016
<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
auth/signup/1654654654
не auth/signup?cell=1654654654
, потому что вы использовали /item/:id
в своем пути
- person Shaishab Roy; 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
Удачи.
вы можете попробовать следующий код: Ваш файл 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>
В 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
auth/signup/1654654654
и когда auth/signup?cell=1654654654
. ты упомянул? @PardeepJain
- person Shaishab Roy; 29.05.2016
/auth/signup?cell=1654654654
верно?
- person Shaishab Roy; 29.05.2016
how to pass route params in [routerLink] angular 2
, я так думаю
- person Pardeep Jain; 29.05.2016
Принятый ответ устарел, и ИМХО не отвечает на вопрос.
Однако вопрос не ясен: «параметры маршрута» находятся в части URL-адреса path, но вопрос был о «параметрах запроса», которые находятся после «?» (вопросительный знак).
Итак, ответ на вопрос содержится в ответе @Akash: вы должны использовать
[queryParams]="{name: value}"
в шаблоне.
Таким образом, этот якорь будет ссылаться на /path/with/myparam?cell=1654654654
:
<a [routerLink]="['/path/with/:paramName', {paramName: "myparam"}]"
[queryParams]="{cell: 1654654654}"
></a>