Comment obtenir des paramètres de requête à partir de l'url en angular-5?

en angle 5, les params de requête sont accessibles en s'abonnant à ceci.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'];
    });
}

alors que les variables de chemin sont accessibles par "ceci.route.instantané.param "

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

mise à Jour Angulaire 6: citant le Docs , concernant ActivatedRoute.queryParams (sur lequel la plupart des autres réponses sont basées):

Deux anciennes propriétés sont encore disponibles. Ils sont moins capable que leurs remplacements, découragés, et peuvent être dépréciés dans un futur Angulaire de la version.

params - Une Observable qui contient obligatoires et facultatives paramètre spécifique à la route. Utilisez paramMap à la place.

queryParams-un Observable qui contient les paramètres de requête disponibles pour tous les trajets. Utilisez queryParamMap à la place.

selon le Docs , la façon simple d'obtenir les paramètres de requête ressemblerait à ceci:

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

pour les méthodes plus avancées (par exemple, réemploi de composants avancés), voir ce chapitre Docs.

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

constructor(private route: ActivatedRoute) {}

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

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

look plus d'options Comment obtenir requête de paramètres à partir de l'url dans angular2?

est tombé sur cette question quand je cherchais une solution similaire, mais je n'avais pas besoin de quoi que ce soit comme routage au niveau de l'application complète ou plus de modules importés.

le code suivant fonctionne très bien pour mon usage et ne nécessite pas de modules supplémentaires ou d'importations.

  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 sorties:

param1 = hello
param2 = 123

lorsque vous avez un objet route vide, c'est principalement dû au fait que vous n'utilisez pas de routeur-outlet dans votre application.composant.HTML.

sans cela, vous ne pourrez pas obtenir un objet route significatif avec des sous-objets non vides, en particulier params & 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 requête param est prête dans app-routing > which exporter la classe Itinéraire utilisé par l'Application de la composante :

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

bien sûr, pour obtenir votre param, j'utilise personnellement this.route.snapshot.params.dynamicParam où dynamicParam est le nom utilisé dans votre composant app-routing:)

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 supposons 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 mal. La redirection viendra avant, supprimera les paramètres de la requête et appellera la méthode ngOnInit() le composant principal sans paramètres de requête.

j'ai changé la troisième ligne de mes parcours

{path: "", component: PageOneComponent},

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

trouvé dans: les composants parents reçoivent des Params vides de la route activée

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

}

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

si vous n'utilisez pas de routeur angulaire, essayez querystring . Installez - le

npm install --save querystring

à votre projet. Dans votre composant faire 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 parce que si vous avez quelque chose comme ceci '/mypage?foo=bar' alors le nom Clé Pour sera ?foo