Comment obtenir les paramètres de requête à partir d'une URL en Angular 5 ?

Question

J'utilise angular 5.0.3, j'aimerais démarrer mon application avec un tas de paramètres de requête tels que /app?param1=hallo&param2=123 . Chaque conseil donné dans Comment obtenir les paramètres de la requête à partir de l'url en Angular 2 ? ne fonctionne pas pour moi.

Une idée pour faire fonctionner les paramètres de requête ?

private getQueryParameter(key: string): string {
  const parameters = new URLSearchParams(window.location.search);
  return parameters.get(key);
}

Cette fonction privée me permet de récupérer mes paramètres, mais je ne pense pas que ce soit la bonne méthode dans le nouvel environnement Angular.

[mise à jour :] Mon application principale ressemble à

@Component({...})
export class AppComponent implements OnInit {

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // would like to get query parameters here...
    // this.route...
  }
}

Answer 1

En Angular 5, les paramètres de la requête sont accessibles en souscrivant à l'option this.route.queryParams (notez que les versions ultérieures d'Angular recommander queryParamMap (voir aussi les autres réponses).

Exemple : /app?param1=hallo&param2=123

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    console.log('Called Constructor');
    this.route.queryParams.subscribe(params => {
        this.param1 = params['param1'];
        this.param2 = params['param2'];
    });
}

alors que les variables de chemin sont accessibles par this.route.snapshot.params

Exemple : /param1/:param1/param2/:param2

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    this.param1 = this.route.snapshot.params.param1;
    this.param2 = this.route.snapshot.params.param2;
}

Answer 2

C'est la solution la plus propre pour moi

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

export class MyComponent {
  constructor(
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    const firstParam: string = this.route.snapshot.queryParamMap.get('firstParamKey');
    const secondParam: string = this.route.snapshot.queryParamMap.get('secondParamKey');
  }
}

Answer 3

Je sais que l'OP a demandé une solution pour Angular 5, mais pour tous ceux qui tombent sur cette question pour les versions plus récentes (6+) d'Angular. Citant le Docs concernant ActivatedRoute.queryParams (sur lequel la plupart des autres réponses sont basées) :

Deux propriétés plus anciennes sont encore disponibles. Elles sont moins capable que leurs remplacements, déconseillés, et peuvent être dépréciés dans un futur version d'Angular.

params - Un Observable qui contient les données obligatoires et facultatives. spécifiques à l'itinéraire. Utilisez plutôt paramMap.

queryParams - Un Observable qui contient les paramètres de requête disponibles à toutes les routes. Utilisez plutôt queryParamMap.

Selon le Docs la manière simple de récupérer les paramètres de la requête ressemblerait à ceci :

constructor(private route: ActivatedRoute) { }

ngOnInit() {
    this.param1 = this.route.snapshot.paramMap.get('param1');
    this.param2 = this.route.snapshot.paramMap.get('param2');
}

Pour des moyens plus avancés (par exemple, la réutilisation avancée des composants), voir ce Chapitre Docs.

EDIT :

Comme il est correctement indiqué dans les commentaires ci-dessous, cette réponse est fausse - au moins pour le cas spécifié par OP.

Le PO demande de récupérer les paramètres globaux de la requête (/app?param1=hallo&param2=123) ; dans ce cas, vous devez utiliser queryParamMap (comme dans la réponse de @dapperdan1985).

paramMap, en revanche, est utilisé sur les paramètres spécifiques à la route (par exemple, /app/:param1/:param2, ce qui donne /app/hallo/123).

Merci à @JasonRoyle et @daka de l'avoir signalé. .

Answer 4

Vous pouvez également utiliser HttpParams comme :

  getParamValueQueryString( paramName ) {
    const url = window.location.href;
    let paramValue;
    if (url.includes('?')) {
      const httpParams = new HttpParams({ fromString: url.split('?')[1] });
      paramValue = httpParams.get(paramName);
    }
    return paramValue;
  }

Answer 5

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    console.log(this.route.snapshot.queryParamMap);
}

UPDATE

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

export class LoginComponent {
    constructor(private router: Router) {
        const snapshot: RouterStateSnapshot = router.routerState.snapshot;
        console.log(snapshot);  // <-- hope it helps
    }
}