How to get query-Parameter aus der URL in Eckigen 5?

Im Winkel 5, die query-Parameter werden aufgerufen, indem die Beteiligung an diesem.route.queryParams.

Beispiel: "/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'];
    });
}

in der Erwägung, dass die Pfad-Variablen zugegriffen wird, die durch "diese.route.snapshot.params"

Beispiel: "/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;
}

Weiß ich, dass OP gefragt, für Eckige 5-Lösung, aber doch für alle, die Ihr stolpert auf diese Frage für die neue (6+) Eckige Versionen. Unter Berufung auf die Docs, über ActivatedRoute.queryParams (die die meisten anderen Antworten sind basierend auf):

Zwei ältere Eigenschaften sind noch verfügbar. Sie sind weniger in der Lage, als
Ihr Ersatz, entmutigt, und möglicherweise veraltet in Zukunft
Eckige version.

params — Eine Beobachtbare enthält die erforderlichen und optionalen
spezifische Parameter der route. Verwenden paramMap statt.

queryParams — Eine Observable, die die Abfrage enthält Parameter zur Verfügung
zu allen Routen. Verwenden queryParamMap statt.

Entsprechend der Docs, der einfache Weg, um die Abfrage-Parameter würde wie folgt Aussehen:

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

Sich für erweiterte Möglichkeiten (z.B. erweiterte Komponente re-Verwendung) finden Sie unter diese Docs Kapitel.

EDIT:

Als es richtig angegeben in den Kommentaren unten, diese Antwort ist falsch - zumindest für den Fall angegeben, OP.

OP fragt man Globale query-Parameter (/app?param1=hallo&param2=123); in diesem Fall sollten Sie queryParamMap (wie in @dapperdan1985 Antwort).

paramMap, auf der anderen Seite, ist auf spezifische Parameter der Strecke (z.B. /app/:param1/:param2, was sich in /app/hallo/123).

Dank @JasonRoyle und @daka für den Hinweis it out.

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

Stolperte über diese Frage, wenn ich war auf der Suche für eine ähnliche Lösung, aber ich didn ' T brauchen etwas wie full application-level-routing oder mehr importierten Module.

Folgende code funktioniert Super für meinen Gebrauch und erfordert keine zusätzlichen Module oder importiert.

  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 Ausgänge:

param1 = hello
param2 = 123

Seien Sie vorsichtig mit Ihren Routen. Ein "redirectTo" entfernen|löschen von query-parameter.

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

Rief ich meine wichtigsten Komponente mit query-Parameter wie "/main?param1=a&param2=b und nehmen an, dass meine query-Parameter kommen in die "ngOnInit ()" - Methode in der main-Komponente vor der Weiterleitung die Weiterleitung wirksam wird.

Aber das ist falsch. Die Umleitung kam vor, löschen Sie die Abfrage-Parameter und rufen Sie die ngOnInit () - Methode in der main-Komponente ohne Abfrage von Parametern.

Änderte ich die Dritte Zeile meiner Strecken zu

{path: "", component: PageOneComponent},

und jetzt meine Abfrage Parameter sind zugänglich, die in den wichtigsten Komponenten ngOnInit und auch in der PageOneComponent.

Wenn Sie nicht mit dem Winkel-router versuchen, querystring. Installieren Sie es

npm install --save querystring

Ihrem Projekt. In der Komponente, so etwas wie dies tun

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

Den substring(1) ist notwendig, weil, wenn Sie so etwas wie dieses '/mypage?foo=bar' dann der name des Schlüssels für ?foo