web-dev-qa-db-fra.com

Comment obtenir les paramètres de requête à partir d'url dans angular-5?

J'utilise 5.0.3 angulaire, je voudrais commencer 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 angular2? ne fonctionne pas pour moi.

Des idées comment obtenir des paramètres de requête fonctionnent?

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 angulaire.

[mise à jour:] Mon application principale ressemble à @Composant({...}) La classe d'exportation AppComponent implémente OnInit {

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // would like to get query parameters here...
    // this.route...
  }
}
angulartypescriptangular-routing
66
Lars

Dans Angular 5, les paramètres de requête sont accessibles en s’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'];
    });
}

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;
}
125
Vijayendra Mudigal

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

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

Deux anciennes propriétés sont encore disponibles. Ils sont moins capables que leurs remplaçants, découragés et peuvent être déconseillés dans le futur Version angulaire.

params - Un observable contenant les informations obligatoires et facultatives paramètres spécifiques à la route. Utilisez plutôt paramMap.

queryParams - Observable contenant les paramètres de requête disponibles à tous les itinéraires. Utilisez plutôt queryParamMap.

Selon le Docs , le moyen 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 des méthodes plus avancées (réutilisation de composants avancés, par exemple), voir le chapitre this Docs.

39
grreeenn
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
    }
}
5
Dmitry Grinko

son travail pour moi:

constructor(private route: ActivatedRoute) {}

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

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

5
izik f

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

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

Le code suivant fonctionne très bien pour mon utilisation et ne nécessite aucun module ni 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 sorties:

param1 = hello
param2 = 123
2
Reed

Lorsque vous avez un objet route vide, cela est principalement dû au fait que vous n'utilisez pas de routeur-prise dans votre app.component.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>just 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.dynamicParam où dynamicParam est le nom utilisé dans votre composant de routage d’application :) 

1
andrea06590

Si vous n'utilisez pas de routeur angulaire, essayez, querystring . 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));
   ...
}

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

0
Chuk Lee

Trouvé dans: Les composants parents sont vides Params de 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();
  }

}
0
Yonatan Ayalon

Soyez prudent avec vos itinéraires. Un "redirectTo" enlèvera | n'importe quel 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 tels que "/ main? Param1 = a & param2 = b et suppose que mes paramètres de requête arrivent dans la méthode" ngOnInit () "du composant principal avant que le transfert de redirection ne prenne effet.

Mais c'est faux. La redirection est venue 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 composants principaux ngOnInit et également dans le composant PageOneComponent.

0
Lars