Comment obtenir les paramètres de requête de l'URL dans Angular 5?

J'utilise angular 5.0.3, je voudrais démarrer mon application avec un tas de paramètres de requête comme /app?param1=hallo&param2=123. Chaque astuce donnée dans Comment obtenir les paramètres de requête à partir de l'URL dans Angular 2? ne fonctionne pas pour moi.

Des idées 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 m'aide à obtenir mes paramètres, mais je ne pense pas que ce soit la bonne manière 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...
  }
}

Dans Angular 5, les paramètres de requête sont accessibles en vous abonnant à this.route.queryParams.

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'];
    });
}

tandis que les variables de chemin d'accès 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;
}

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');
  }
}

Je sais que OP a demandé une solution Angular 5, mais encore pour vous tous qui tombez sur cette question pour les versions angulaires plus récentes (6+). En citant les documents , concernant ActivatedRoute.queryParams (sur lesquels la plupart des autres réponses sont basées):

Deux propriétés plus anciennes sont toujours disponibles. Ils sont moins capables que leurs remplaçants, déconseillés et pourraient être déconseillés dans une future version Angular.

params - Un observable qui contient les paramètres obligatoires et facultatifs spécifiques à l'itinéraire. Utilisez plutôt paramMap.

queryParams - Un observable qui contient les paramètres de requête disponibles pour tous les itinéraires. Utilisez plutôt queryParamMap.

Selon la documentation , le moyen simple d'obtenir les paramètres de 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 méthodes plus avancées (par exemple la réutilisation avancée des composants), consultez ce chapitre Docs.

ÉDITER:

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

OP demande d'obtenir les paramètres de requête globaux (/ app? Param1 = hallo & param2 = 123); dans ce cas, vous devez utiliser queryParamMap (comme dans @ dapperdan1985 answer).

paramMap, d'autre part, est utilisé sur des paramètres spécifiques à la route (par exemple / app /: param1 /: param2, ce qui donne / app / hallo / 123).

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

Vous pouvez également utiliser HttpParams , tels que:

  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;
  }

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

constructor(private route: ActivatedRoute) {}

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

METTRE À JOUR

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

son travail pour moi:

constructor(private route: ActivatedRoute) {}

ngOnInit()
{
    this.route.queryParams.subscribe(map => map);
    this.route.snapshot.queryParams; 
}

regardez plus d'options Comment obtenir les paramètres de requête de l'URL dans angular2?

Paramètres de requête et de chemin (Angular 8)

Pour une URL comme https://myapp.com/user/666/read?age=23, utilisez

import { combineLatest } from 'rxjs';
// ...

combineLatest( [this.route.paramMap, this.route.queryParamMap] )
  .subscribe( ([pathParams, queryParams]) => {
    let userId = pathParams.get('userId');    // =666
    let age    = queryParams.get('age');      // =23
    // ...
  })

METTRE À JOUR

Dans le cas où vous utilisez this.router.navigate([someUrl]);et que vos paramètres de requête sont incorporés dans une someUrlchaîne, angular encode une URL et vous obtenez quelque chose comme ceci https://myapp.com/user/666/read%3Fage%323 - et la solution ci-dessus donnera un résultat erroné ( queryParams sera vide et les paramètres de chemin peuvent être collés au dernier paramètre de chemin s'il se trouve à l'extrémité du chemin). Dans ce cas, modifiez le mode de navigation pour

this.router.navigateByUrl(someUrl);

Je suis tombé sur cette question lorsque je cherchais une solution similaire, mais je n'avais besoin de rien comme un routage complet au niveau de l'application ou plus de modules importés.

Le code suivant fonctionne très bien pour mon utilisation et ne nécessite aucun module ou importation supplémentaire.

  GetParam(name){
    const results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if(!results){
      return 0;
    }
    return results[1] || 0;
  }

  PrintParams() {
    console.log('param1 = ' + this.GetParam('param1'));
    console.log('param2 = ' + this.GetParam('param2'));
  }

http://localhost:4200/?param1=hello&param2=123 les sorties:

param1 = hello
param2 = 123

Angular Router fournit la méthode parseUrl (url: string) qui analyse l'URL en UrlTree . Une des propriétés d'UrlTree est queryParams. Donc vous pouvez faire qc comme:

this.router.parseUrl(this.router.url).queryParams[key] || '';

Malheureusement, la solution la plus propre n'est pas la solution la plus extensible. Dans les versions récentes d'Angular, il est suggéré dans les autres réponses que vous pouvez facilement obtenir les paramètres de requête en utilisant ActivatedRoute Injectible et en utilisant spécifiquement la propriété snapshot:

this.route.snapshot.queryParamMap.get('param')

ou la propriété subscribe (utilisée dans les cas où la chaîne de requête sera mise à jour, par exemple en naviguant dans les identifiants utilisateur):

this.route.queryParamMap.subscribe(params => console.log(params));

Je suis ici pour vous dire que ces solutions ont un défaut béant qui n'a pas été résolu depuis un certain temps: https://github.com/angular/angular/issues/12157

Dans l'ensemble, la seule solution à toute épreuve est d'utiliser du bon vieux javascript vanille. Dans ce cas, j'ai créé un service de manipulation d'URL:

import { Injectable } from '@angular/core';
import { IUrl } from './iurl';

@Injectable()
export class UrlService {
    static parseQuery(url: string): IUrl {
        const query = url.slice(url.indexOf('?')+1).split('&').reduce( (acc,query) => {
            const parts = query.split('=');
            acc[parts[0]] = parts[1];
            return acc;
        }, {});

        return {
            a: query['a'],
            b: query['b'],
            c: query['c'],
            d: query['d'],
            e: query['e']
        }
    }
}

Lorsque vous avez un objet route vide, c'est principalement dû au fait que vous n'utilisez pas de sortie de routeur dans votre app.component.html.

Sans cela, vous ne pourrez pas obtenir un objet route significatif avec des sous-objets non vides, en particulier les paramètres et queryParams.

Essayez d'ajouter <router-outlet><router-outlet> juste avant d'appeler votre <app-main-component></app-main-component>

Avant cela, assurez-vous que votre paramètre de requête est prêt dans app-routing> qui exporte la classe Route utilisée par le composant App:

param: '/param/:dynamicParam', path: MyMainComponent

Dernière chose bien sûr, pour obtenir votre paramètre, j'utilise personnellement this.route.snapshot.params.dynamicParamoù dynamicParam est le nom utilisé dans votre composant de routage d'application :)

Soyez prudent avec vos itinéraires. Un "redirectTo" supprimera | supprimera tout paramètre de requête.

const appRoutes: Routes [
 {path: "one", component: PageOneComponent},
 {path: "two", component: PageTwoComponent},
 {path: "", redirectTo: "/one", pathMatch: full},
 {path: "**", redirectTo: "/two"}
]

J'ai appelé mon composant principal avec des paramètres de requête comme "/ main? Param1 = a & param2 = b et je suppose que mes paramètres de requête arrivent dans la méthode" ngOnInit () "dans le composant principal avant que la redirection ne prenne effet.

Mais c'est faux. La redirection viendra avant, supprimez les paramètres de requête et appelez la méthode ngOnInit () dans le composant principal sans paramètres de requête.

J'ai changé la troisième ligne de mes itinéraires en

{path: "", component: PageOneComponent},

et maintenant mes paramètres de requête sont accessibles dans les principaux composants ngOnInit et aussi dans le PageOneComponent.

Trouvé dans: les composants parents obtiennent des paramètres vides d'ActivatedRoute

A travaillé pour moi:

import {Component, OnDestroy, OnInit} from '@angular/core';
import { Router, ActivatedRoute, Params, RoutesRecognized } from '@angular/router';

@Component({
  selector: 'app-navigation-bar',
  templateUrl: './navigation-bar.component.html',
  styleUrls: ['./navigation-bar.component.scss']
})
export class NavigationBarComponent implements OnInit, OnDestroy {
  private sub: any;
  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    this.sub = this.router.events.subscribe(val => {
      if (val instanceof RoutesRecognized) {
        console.log(val.state.root.firstChild.params);
      }
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

}

Je suis juste tombé sur le même problème et la plupart des réponses ici semblent ne le résoudre que pour le routage interne angulaire, puis certaines d'entre elles pour les paramètres d'itinéraire qui ne sont pas les mêmes que les paramètres de requête.

Je suppose que j'ai un cas d'utilisation similaire à la question initiale de Lars.

Pour moi, le cas d'utilisation est par exemple le suivi des références:

Angular en cours d'exécution mycoolpage.com, avec routage de hachage, mycoolpage.comredirige donc vers mycoolpage.com/#/. Pour référence, cependant, un lien tel que mycoolpage.com?referrer=foodevrait également être utilisable. Malheureusement, Angular supprime immédiatement les paramètres de la requête, allant directement à mycoolpage.com/#/.

Toute sorte de «truc» avec l'utilisation d'un composant vide + AuthGuard et obtenir queryParamsou queryParamMapn'a malheureusement pas fonctionné pour moi. Ils étaient toujours vides.

Ma solution hacky a fini par être de gérer cela dans un petit script dans index.htmllequel obtient l'URL complète, avec paramètres de requête. J'obtiens ensuite la valeur du paramètre de la demande via la manipulation de la chaîne et je la place sur l'objet window. Un service distinct gère ensuite l'obtention de l'ID de l'objet window.

script index.html

const paramIndex = window.location.href.indexOf('referrer=');
if (!window.myRef && paramIndex > 0) {
  let param = window.location.href.substring(paramIndex);
  param = param.split('&')[0];
  param = param.substr(param.indexOf('=')+1);
  window.myRef = param;
}

Un service

declare var window: any;

@Injectable()
export class ReferrerService {

  getReferrerId() {
    if (window.myRef) {
      return window.myRef;
    }
    return null;
  }
}

Solution simple

 // in routing file
       {
            path: 'checkout/:cartId/:addressId',
            loadChildren: () => import('./pages/checkout/checkout.module').then(m => m.CheckoutPageModule)
          },

    // in Component file

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

                 constructor(
                      private _Router: ActivatedRoute
                  ) { }

                  ngOnInit() {
                    this.cartId = this._Router.snapshot.params.cartId;
                    this.addressId = this._Router.snapshot.params.addressId;
                    console.log(this.addressId, "addressId")
                    console.log(this.cartId, "cartId")
                  }

http: // localhost: 4200 / products? order = popular

Nous pouvons accéder au paramètre de requête de commande comme ceci:

this.route.queryParams
      .filter(params => params.order)
      .subscribe(params => {
        console.log(params)// {order: "popular"}

        this.order = params.order;
        console.log(this.order); // popular
      });
  }

Il y a aussi queryParamMap, qui retourne une observable avec un objet paramMap.

Compte tenu de l'URL de la route suivante:

http: // localhost: 4200 / products? order = popular & filter = new

this.route.queryParamMap.subscribe(params => {
  this.orderObj = {...params.keys, ...params};
});

Source - https://alligator.io/angular/query-parameters/

À, je pense que Angular 8:

ActivatedRoute.paramsa été remplacé par ActivatedRoute.paramMap ActivatedRoute.queryParamsa été remplacé par ActivatedRoute.queryParamMap

/*
Example below url with two param (type and name) 
URL : http://localhost:4200/updatePolicy?type=Medicare%20Insurance&name=FutrueInsurance
*/ 
  constructor(private route: ActivatedRoute) {
    //Read url query parameter `enter code here`
  this.route.queryParams.subscribe(params => {
    this.name= params['type'];
    this.type= params['name'];
    alert(this.type);
    alert(this.name);

 });

  }

Si vous n'utilisez pas de routeur angulaire, essayez de lancer une requête . Installez-le

npm install --save querystring

à votre projet. Dans votre composant, faites quelque chose comme ça

import * as qs from 'querystring';
...
ngOnInit() {
   const params = qs.parse(window.location.search.substring(1));
   ...
}

Le substring(1)est nécessaire car si vous avez quelque chose comme ça, '/mypage?foo=bar'le nom de la clé sera?foo