wake-up-neo.net

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

Ich verwende die Version 5.0.3. Ich möchte meine Anwendung mit einigen Abfrageparametern starten. wie "/ app? param1 = hallo & param2 = 123". Jeder Tipp in Wie bekomme ich Abfrage-Parameter von der URL in angle2? funktioniert nicht bei mir.

Irgendwelche Ideen, wie man Abfrageparameter zum Laufen bringt?

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

Diese private Funktion hilft mir dabei, meine Parameter zu ermitteln, aber ich denke nicht, dass dies in der neuen Winkelumgebung der richtige Weg ist.

[Update:] Meine Hauptanwendung sieht wie .__ aus. @Komponente({...}) Exportklasse AppComponent implementiert OnInit {

  constructor(private route: ActivatedRoute) {}

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

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

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

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.

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

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?

5
izik f

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

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
2
Reed

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. 

1
andrea06590

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.

0
Chuk Lee

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

}
0
Yonatan Ayalon

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.

0
Lars