web-dev-qa-db-fra.com

comment passer les paramètres de route dans [routerLink] angular 2

J'essaie de créer une application avec angular 2, et je veux passer des paramètres pour marquer un dans [routerLink], je veux créer un lien comme celui-ci:

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

je ne sais pas comment passer cell dans le modèle ...

angularangular-routingangular-routerlink
10
Alireza Valizade

Si vous allez utiliser angula2 beta alors vous devez envoyer ce paramètre pendant le routage.

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

et que du côté de la réception, vous devez obtenir le paramètre en utilisant RouteParams.

écrou si vous allez utiliser angular2 RC que vous devez utiliser RouteSegment au lieu d'utiliser RouteParams dans angular2 RC. comme ça :-

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 { }
8
Pardeep Jain

Vous pouvez travailler avec queryParams qui fonctionne avec routerLink pour build le url. Par exemple:

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

Cela build une route comme http://localhost:3000/profiles?min=45&max=50&location=29923

Bonne chance.

11
Akash

vous pouvez essayer le code ci-dessous: Votre fichier ts sera comme ceci:

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

Et dans votre fichier html,

<a [routerLink]="['//auth/signup?cell=1654654654']"></a>
2
Tarang Bhalodia

Dans Angular2 prend en charge les paramètres de requête et les variables de chemin dans le routage.

utiliser comme:

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

et dans le composant:

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

puis affiché dans l'URL comme ça vous voulez /auth/signup?cell=1654654654

NB:

Si dans votre chemin, contient la cellule dans le composant en tant que paramètres tels que: /auth/signup/:cell et routelink comme: [routerLink]="['Signup', {cell: '1654654654'}]" alors l'url s'affichera comme: auth/signup/1654654654

2
Shaishab Roy

La réponse acceptée est obsolète et à mon humble avis ne répond pas à la question.

Cependant, la question n'est pas claire: les "paramètres de route" se trouvent dans la partie du chemin de l'URL, mais la question portait sur les "paramètres de requête" qui se trouvent après le '?' (point d'interrogation).

Donc, la réponse à la question est dans le réponse de @Akash : vous devez utiliser

[queryParams]="{name: value}"

dans le modèle.

Cette ancre fera donc référence à /path/with/myparam?cell=1654654654:

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