Wie bekomme ich Abfrageparameter von der URL in Winkel-5?

In Angular 5 können Sie auf die Abfrageparameter zugreifen, indem Sie this.route.queryParams abonnieren.

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

auf die Pfadvariablen wird dagegen über "this.route.snapshot.params" zugegriffen.

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

Dies ist die sauberste Lösung für mich

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

Ich weiß, dass OP nach Angular 5-Lösung gefragt hat, aber dennoch für alle, die diese Frage nach neueren (6+) Angular-Versionen stoßen. Zitieren der Docs zu ActivatedRoute.queryParams (auf denen die meisten anderen Antworten basieren): 

Zwei ältere Objekte sind noch verfügbar. Sie sind weniger geeignet als Ihre Ersetzungen, werden abgelehnt und werden möglicherweise als veraltet eingestuft in einer zukünftigen Winkelausführung.

params - Ein Observable, das die erforderliche und optionale .__ enthält. für die Route spezifische Parameter. Verwenden Sie stattdessen paramMap.

queryParams - Ein Observable, das die verfügbaren Abfrageparameter enthält zu allen Strecken. Verwenden Sie stattdessen queryParamMap.

Laut den Anweisungen von Docs würde der einfache Weg zum Abrufen der Abfrageparameter folgendermaßen aussehen:

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

Weitergehende Möglichkeiten (z. B. erweiterte Wiederverwendung von Komponenten) finden Sie im this Docs-Kapitel.

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

seine Arbeit für mich:

constructor(private route: ActivatedRoute) {}

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

weitere Optionen ansehen Wie bekomme ich Abfrageparameter in URL2 von der URL?

Sie können auch HttpParams verwenden, beispielsweise: 

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

Ich stolperte über diese Frage, als ich nach einer ähnlichen Lösung suchte, aber ich brauchte kein komplettes Routing auf Anwendungsebene oder mehr importierte Module. 

Der folgende Code funktioniert gut für meine Verwendung und erfordert keine zusätzlichen Module oder Importe. 

  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 gibt aus:

param1 = hello
param2 = 123

Wenn Sie ein leeres Routenobjekt haben, liegt dies hauptsächlich daran, dass Sie in Ihrer app.component.html keinen Router-Outlet verwenden.

Ohne diese Option können Sie kein aussagekräftiges Routenobjekt mit nicht leeren SubObjects erhalten, insbesondere mit Params & AbfrageParams.

Versuchen Sie, <router-outlet><router-outlet>just hinzuzufügen, bevor Sie Ihren <app-main-component></app-main-component> aufrufen.

Stellen Sie vorher sicher, dass Sie Ihren Abfrageparameter im App-Routing bereit haben,> welche Klasse die von der App-Komponente verwendete Klasse exportiert: 

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

Das letzte, was ich natürlich für Ihren Parameter brauche, benutze ich this.route.snapshot.params.dynamicParam, wobei dynamicParam der Name ist, der in Ihrer App-Routing-Komponente verwendet wird. 

Wenn Sie keinen Angular-Router verwenden, versuchen Sie es mit querystring . Es installieren

npm install --save querystring

zu deinem Projekt. In Ihrer Komponente machen Sie so etwas

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

Die substring(1) ist notwendig, da der Schlüsselname für '/mypage?foo=bar'?foo lautet.

Gefunden in: Übergeordnete Komponenten erhalten leere Parameter von ActivatedRoute

Arbeitete für mich:

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

}

Seien Sie vorsichtig mit Ihren Routen. Ein "redirectTo" entfernt alle Abfrageparameter.

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

Ich habe meine Hauptkomponente mit Abfrageparametern wie "/ main? Param1 = a & param2 = b" aufgerufen und gehe davon aus, dass meine Abfrageparameter in der Methode "ngOnInit ()" in der Hauptkomponente ankommen, bevor die Weiterleitung der Weiterleitung wirksam wird.

Das ist aber falsch. Die Umleitung kam vor, löscht die Abfrageparameter und ruft die Methode ngOnInit () in der Hauptkomponente ohne Abfrageparameter auf.

Ich habe die dritte Zeile meiner Routen in geändert

{path: "", component: PageOneComponent},

und jetzt sind meine Abfrageparameter in den Hauptkomponenten ngOnInit und auch in der PageOneComponent verfügbar.