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

Je suis en utilisant angulaire 5.0.3, je voudrais commencer mon application avec un tas de paramètres de requête. comme "/app?param1=bonjour&param2=123". Chaque conseil donné dans Comment obtenir requête de paramètres à partir de l'url dans angular2? ne fonctionne pas pour moi.

Toute idées sur la façon d'obtenir les paramètres de la requête travail?

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

Cette fonction privée m'aide à avoir mes paramètres, mais je ne pense pas que c'est la bonne voie à de nouvelles Angulaire de l'environnement.

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

  constructor(private route: ActivatedRoute) {}

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

source d'informationauteur Lars

  1. 61

    Angulaire 5, la requête params sont accessibles par abonnement.l'itinéraire.queryParams.

    Exemple: "/app?param1=bonjour&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 d'accès sont accessibles par des "cette.l'itinéraire.de l'instantané.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;
}
  2. 4
    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
    }
}
  3. 4

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

    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?

  5. 1

    Suis tombé sur cette question lorsque je cherchais une solution similaire mais je n'ai pas besoin de quelque chose comme le niveau d'application de routage ou de plusieurs modules importés.

    Le code suivant fonctionne très bien pour mon utilisation et ne nécessite pas de modules supplémentaires ou des 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
  6. 0

    Lorsque vous avez un itinéraire vide d'objet, c'est principalement en raison du fait que vous n'êtes pas à l'aide d'un routeur-prise de courant dans votre app.component.html.

    Sans cela, vous ne serez pas en mesure d'obtenir un véritable parcours d'objet non vide de sous-objets, en particulier params & queryParams.

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

    Avant cela, assurez-vous d'avoir votre requête param prêt en application de routage > export de la classe de l'Itinéraire utilisé par App composant : 

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

    Dernière chose, bien sûr, pour obtenir vos param, personnellement, je utiliser this.route.snapshot.params.dynamicParam où dynamicParam est le nom utilisé dans votre application-composant de routage 🙂

  7. 0

    Être prudent avec vos itinéraires. Un "redirectTo" va supprimer, supprimer tous les paramètres de la 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 principal composant avec les paramètres de la requête comme "/main?param1=a&param2=b et supposons que mes paramètres de requête d'arriver dans la "ngOnInit()" de la méthode dans le principal composant avant de le rediriger transfert prend effet.

    Mais c'est faux. La redirection est venu avant, déposer les paramètres de la requête à l'écart et d'appeler la ngOnInit() dans le composant principal sans les paramètres de la requête.

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

    {path: "", component: PageOneComponent},

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

  8. 0

    Trouvé dans: Composants Parent se vide Params de ActivatedRoute

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

}