15

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...

Improve this question
1

5 Answers 5

Reset to default
13

You can work with queryParams which works with routerLink to build the url. For ex:

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

This will build a route like http://localhost:3000/profiles?min=45&max=50&location=29923

Good Luck.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

10

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 { }
Improve this answer

6 Comments

i dont want use this way but its ok and how to bind this?i want when type on input cell params bind in a tag.
than just bind your input field value to [(ngModel)] and than pass that variable as routerParameter. @AlirezaValizade see my updated answer.
` <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>` i use FormBuilder and not working
try this one <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>
your example url will show like: auth/signup/1654654654 not auth/signup?cell=1654654654 because you used /item/:id in your path
|
2

you can try the code below: Your ts file will be like this:

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

And in you html file,

<a [routerLink]="['//auth/signup?cell=1654654654']"></a>
Improve this answer

1 Comment

You can bind using [(ngModel)] and use routeParams
2

In Angular2 supports both query parameters and path variables within routing.

use like:

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

and in component:

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

then shown in url like that you want /auth/signup?cell=1654654654

NB:

If in your path contain cell in component as params like: /auth/signup/:cell and routelink like: [routerLink]="['Signup', {cell: '1654654654'}]" then url will show like: auth/signup/1654654654

Improve this answer

10 Comments

already mentioned all your answer's content in existed answers nothing new added to answer.
In which answer ?@PardeepJain
see my answer @Shaileshab
which answer mentioned when url shown like auth/signup/1654654654 and when auth/signup?cell=1654654654. you mentioned? @PardeepJain
the question is not about how url is being shown, the question is about how to pass parameter is't it ?
|
2

The accepted answer is outdated and IMHO doesn't answer the question.

However the question is not clear: "route params" are in the path part of the URL but the question was about "query params" which are after the '?' (question mark).

So the answer to the question is in the answer of @Akash: you have to use

[queryParams]="{name: value}"

in the template.

So this anchor will reference to /path/with/myparam?cell=1654654654:

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.