web-dev-qa-db-fra.com

Comment gérer les paramètres de requête dans angular 2

Dans mon routable component j'ai 

@RouteConfig {
  {path: '/login',   name: 'Login', component: LoginComponent}
}

Mais comment puis-je obtenir les paramètres de requête si je vais à app_url/login?token=1234?

javascriptjqueryangularangular2-routing
59
monty_lennie

Pour compléter les deux réponses précédentes, Angular2 prend en charge les paramètres de requête et les variables de chemin dans le routage. Dans la définition @RouteConfig, si vous définissez des paramètres dans un chemin, Angular2 les traite en tant que variables de chemin et en tant que paramètres de requête.

Prenons un échantillon:

@RouteConfig([
  { path: '/:id', component: DetailsComponent, name: 'Details'}
])

Si vous appelez la méthode navigate du routeur comme suit:

this.router.navigate( [
  'Details', { id: 'companyId', param1: 'value1'
}]);

Vous aurez l'adresse suivante: /companyId?param1=value1. La manière d'obtenir les paramètres est la même pour les paramètres de requête et les variables de chemin. La différence entre eux est que les variables de chemin peuvent être considérées comme des paramètres obligatoires et les paramètres de requête comme des paramètres facultatifs.

J'espère que ça vous aide, Thierry

UPDATE: Une fois les modifications apportées aux paramètres de requête http du routeur alpha.31 du routeur ne fonctionnent plus ( Matrix params # 2774 ). Au lieu de cela, le routeur angulaire utilise la notation dite Matrix URL.

Référence https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters : 

Les paramètres de route facultatifs ne sont pas séparés par "?" et "&" comme ils serait dans la chaîne de requête d'URL. Ils sont séparés par des points-virgules ";" C’est la notation matricielle des URL - quelque chose que vous n’avez peut-être jamais vu auparavant.

44
Thierry Templier

Les RouteParams sont maintenant obsolètes. Voici comment procéder dans le nouveau routeur.

this.router.navigate(['/login'],{ queryParams: { token:'1234'}})

Et puis dans le composant de connexion, vous pouvez prendre le paramètre,

constructor(private route: ActivatedRoute) {}
ngOnInit() {
    // Capture the token  if available
    this.sessionId = this.route.queryParams['token']

}

Ici est la documentation 

40
Jayantha Lal Sirisena

Il semble que RouteParams n'existe plus et est remplacé par ActivatedRoute . ActivatedRoute nous donne accès aux paramètres de notation de la matrice URL. Si nous voulons obtenir les paramètres de la chaîne de requête ?, nous devons utiliser Router.RouterState . Les paramètres de chaîne de requête traditionnels sont conservés dans le routage, ce qui peut ne pas être le résultat souhaité. La préservation du fragment est maintenant facultative dans le routeur 3.0.0-rc.1.

import { Router, ActivatedRoute } from '@angular/router';
@Component ({...})
export class paramaterDemo {
  private queryParamaterValue: string;
  private matrixParamaterValue: string;
  private querySub: any;
  private matrixSub: any;

  constructor(private router: Router, private route: ActivatedRoute) { }
  ngOnInit() {
    this.router.routerState.snapshot.queryParams["queryParamaterName"];
    this.querySub = this.router.routerState.queryParams.subscribe(queryParams => 
      this.queryParamaterValue = queryParams["queryParameterName"];
    );

    this.route.snapshot.params["matrixParameterName"];
    this.route.params.subscribe(matrixParams =>
      this.matrixParamterValue = matrixParams["matrixParameterName"];
    );
  }

  ngOnDestroy() {
    if (this.querySub) {
      this.querySub.unsubscribe();
    }
    if (this.matrixSub) {
      this.matrixSub.unsubscribe();
    }
  }
}

Nous devrions être en mesure de manipuler la notation ? lors de la navigation, ainsi que la notation ;, mais je n'ai que la notation matricielle à fonctionner pour le moment. Le plnker qui est attaché à la dernière documentation de router indique que cela devrait ressembler à ceci.

let sessionId = 123456789;
let navigationExtras = {
  queryParams: { 'session_id': sessionId },
  fragment: 'anchor'
};

// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);
19
Stephen

Cela a fonctionné pour moi (depuis Angular 2.1.0):

constructor(private route: ActivatedRoute) {}
ngOnInit() {
  // Capture the token  if available
  this.sessionId = this.route.snapshot.queryParams['token']

}
15
brando

Angular2 v2.1.0 (stable):

ActivatedRoute fournit un observable que l'on peut souscrire.

  constructor(
     private route: ActivatedRoute
  ) { }

  this.route.params.subscribe(params => {
     let value = params[key];
  });

Cela se déclenche à chaque fois que la route est mise à jour:

4
marcel

(Pour la route des enfants uniquement, telle que/hello-world)

Dans le cas où vous souhaiteriez effectuer ce type d’appel:

/ hello-world? foo = bar & fruit = banane

Angular2 n'utilise pas ? ni & mais ; au lieu. Donc, l'URL correcte devrait être:

/ hello-world; foo = bar; fruit = banane

Et pour obtenir ces données: 

import { Router, ActivatedRoute, Params } from '@angular/router';

private foo: string;
private fruit: string;

constructor(
  private route: ActivatedRoute,
  private router: Router
  ) {}

ngOnInit() {
  this.route.params.forEach((params: Params) => {
      this.foo = params['foo'];
      this.fruit = params['fruit'];
  });
  console.log(this.foo, this.fruit); // you should get your parameters here
}

Source: https://angular.io/docs/ts/latest/guide/router.html

4
Wetteren Rémi

Pour Angular 4  

Url: 

http://example.com/company/100

Chemin du routeur:  

const routes: Routes = [
  { path: 'company/:companyId', component: CompanyDetailsComponent},

]

Composant: 

@Component({
  selector: 'company-details',
  templateUrl: './company.details.component.html',
  styleUrls: ['./company.component.css']
})
export class CompanyDetailsComponent{
   companyId: string;

   constructor(private router: Router, private route: ActivatedRoute) {
          this.route.params.subscribe(params => {
          this.companyId = params.companyId;
          console.log('companyId :'+this.companyId);
     }); 
  }
}

Sortie de la console:

companyId: 100

2
Amir

Angulaire 4:

J'ai inclus les versions JS (pour OG) et TS ci-dessous.

.html

<a [routerLink]="['/search', { tag: 'fish' } ]">A link</a>

Dans ce qui précède, j'utilise le tableau de paramètres de liens voir les sources ci-dessous pour plus d'informations. 

routage.js

(function(app) {
    app.routing = ng.router.RouterModule.forRoot([
        { path: '', component: indexComponent },
        { path: 'search', component: searchComponent }
    ]);
})(window.app || (window.app = {}));

searchComponent.js

(function(app) {
    app.searchComponent =
        ng.core.Component({
            selector: 'search',
                templateUrl: 'view/search.html'
            })
            .Class({
                constructor: [ ng.router.Router, ng.router.ActivatedRoute, function(router, activatedRoute) {
                // Pull out the params with activatedRoute...
                console.log(' params', activatedRoute.snapshot.params);
                // Object {tag: "fish"}
            }]
        }
    });
})(window.app || (window.app = {}));

routage.ts (extrait)

const appRoutes: Routes = [
  { path: '', component: IndexComponent },
  { path: 'search', component: SearchComponent }
];
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
    // other imports here
  ],
  ...
})
export class AppModule { }

searchComponent.ts

import 'rxjs/add/operator/switchMap';
import { OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

export class SearchComponent implements OnInit {

constructor(
   private route: ActivatedRoute,
   private router: Router
) {}
ngOnInit() {
    this.route.params
      .switchMap((params: Params) => doSomething(params['tag']))
 }

Plus d'infos:

"Link Parameter Array" https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array

"Itinéraire activé - le guichet unique pour les informations sur l'itinéraire" https://angular.io/docs/ts/latest/guide/router.html#!#activated-route

2
Ally

Dans Angular 6, j'ai trouvé ce moyen plus simple:

navigate(["/yourpage", { "someParamName": "paramValue"}]);

Ensuite, dans le constructeur ou dans ngInit, vous pouvez directement utiliser:

let value = this.route.snapshot.params.someParamName;
1
Andrew

La manière simple de faire cela dans Angular 7+ est de:

Définir un chemin dans votre? -Routing.module.ts

{ path: '/yourpage', component: component-name }

Importez le module ActivateRoute and Router dans votre composant et insérez-les dans le constructeur

contructor(private route: ActivateRoute, private router: Router){ ... }

Abonnez-vous à ActivateRoute to ngOnInit

ngOnInit() {

    this.route.queryParams.subscribe(params => {
      console.log(params);
      // {page: '2' }
    })
}

Fournissez-le à un lien:

<a [routerLink]="['/yourpage']" [queryParams]="{ page: 2 }">2</a>
1
Fortedx

Selon la documentation Angular2 vous devez utiliser:

@RouteConfig([
   {path: '/login/:token', name: 'Login', component: LoginComponent},
])

@Component({ template: 'login: {{token}}' })
class LoginComponent{
   token: string;
   constructor(params: RouteParams) {
      this.token = params.get('token');
   }
}
1
suvroc

Mise à jour angulaire 5+

Route.snapshot fournit la valeur initiale du paramètre route carte. Vous pouvez accéder aux paramètres directement sans vous abonner ou ajout d'opérateurs observables. C'est beaucoup plus simple d'écrire et de lire:

Citation de Angular Docs

Pour vous aider, voici comment procéder avec le nouveau routeur:

this.router.navigate(['/login'], { queryParams: { token:'1234'} });

Et puis dans le composant de connexion (notez le nouveau .snapshot ajouté):

constructor(private route: ActivatedRoute) {}
ngOnInit() {
    this.sessionId = this.route.snapshot.queryParams['token']

}
0
William Hampshire