Wie bekomme ich Abfrageparameter von der URL in Angular 2?

Ich benutze angle2.0.0-beta.7. Wenn eine Komponente in einen Pfad geladen wird, zu dem /path?query=value1sie umgeleitet wird /path. Warum wurden die GET-Parameter entfernt? Wie kann ich die Parameter beibehalten?

Ich habe einen Fehler in den Routern. Wenn ich eine Hauptroute habe wie

@RouteConfig([
  {
      path: '/todos/...',
      name: 'TodoMain',
      component: TodoMainComponent
  }
])

und mein Kind Route wie

@RouteConfig([
  { path: '/', component: TodoListComponent, name: 'TodoList', useAsDefault:true },
  { path: '/:id', component: TodoDetailComponent, name:'TodoDetail' }
])

dann kann ich keine Parameter in TodoListComponent bekommen. Ich kann bekommen

params("/my/path;param1=value1;param2=value2") 

aber ich will den Klassiker

query params("/my/path?param1=value1&param2=value2")

Durch Injizieren einer Instanz von ActivatedRoutekann man eine Vielzahl von Observablen abonnieren, einschließlich a queryParamsund a paramsObservable:

import {Router, ActivatedRoute, Params} from '@angular/router';
import {OnInit, Component} from '@angular/core';

@Component({...})
export class MyComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
    this.activatedRoute.queryParams.subscribe(params => {
        const userId = params['userId'];
        console.log(userId);
      });
  }

}

A HINWEIS ZUR ABMELDUNG

@Reto und @ codef0rmer hatten zu Recht darauf hingewiesen, dass gemäß den offiziellen Dokumenten in diesem Fall eine Methode unsubscribe()innerhalb der Komponenten onDestroy()nicht erforderlich ist. Dies wurde aus meinem Codebeispiel entfernt. (siehe blaues Warnfeld in diesem Tutorial)

Wenn eine URL wie diese http://stackoverflow.com?param1=value

Sie können den Parameter 1 per Code erhalten:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
    selector: '',
    templateUrl: './abc.html',
    styleUrls: ['./abc.less']
})
export class AbcComponent implements OnInit {
    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        // get param
        let param1 = this.route.snapshot.queryParams["param1"];
    }
}

Obwohl in der Frage die Version Beta 7 angegeben ist , wird diese Frage bei Google auch als Top-Suchergebnis für häufig verwendete Ausdrücke wie Winkel-2-Abfrageparameter angezeigt . Aus diesem Grund finden Sie hier eine Antwort für den neuesten Router (derzeit in Alpha.7) ).

Die Art und Weise, wie die Parameter gelesen werden, hat sich dramatisch geändert. Zuerst müssen Sie die Routerin Ihre Konstruktorparameter aufgerufene Abhängigkeit wie folgt einfügen:

constructor(private router: Router) { }

und danach können wir die Abfrageparameter auf unserer ngOnInitMethode abonnieren (Konstruktor ist auch in Ordnung, ngOnInitsollte aber für die Testbarkeit verwendet werden) wie

this.router
  .routerState
  .queryParams
  .subscribe(params => {
    this.selectedId = +params['id'];
  });

In diesem Beispiel lesen wir die Abfrageparameter- ID von URL wieexample.com?id=41 .

Es gibt noch wenige Dinge zu beachten:

1. Der Zugriff auf die Eigenschaft paramslike gibt params['id']immer eine Zeichenfolge zurück , die durch Präfixieren in eine Zahl konvertiert werden kann +.
2. Der Grund, warum die Abfrageparameter mit Observable abgerufen werden, besteht darin, dass dieselbe Komponenteninstanz wiederverwendet werden kann, anstatt eine neue zu laden. Jedes Mal, wenn der Abfrageparameter geändert wird, wird ein neues Ereignis ausgelöst, das wir abonniert haben, und wir können entsprechend auf Änderungen reagieren.

Die Antwort von @ StevePaul hat mir sehr gut gefallen, aber wir können das Gleiche tun, ohne einen fremden Anruf zum Abonnieren / Abbestellen zu tätigen.

import { ActivatedRoute } from '@angular/router';
constructor(private activatedRoute: ActivatedRoute) {
    let params: any = this.activatedRoute.snapshot.params;
    console.log(params.id);
    // or shortcut Type Casting
    // (<any> this.activatedRoute.snapshot.params).id
}

Abfrageparameter senden

import { Router } from '@angular/router';
this.router.navigate([ '/your-route' ], { queryParams: { key: va1, keyN: valN } });

Abfrageparameter empfangen

import { ActivatedRoute } from '@angular/router';
this.activatedRoute.queryParams.subscribe(params => {
    let value_1 = params['key'];
    let value_N = params['keyN'];
});

Offizielle Quelle

Hallo, Sie können URLSearchParams verwenden. Weitere Informationen finden Sie hier .

importieren:

import {URLSearchParams} from "@angular/http";

und Funktion:

getParam(){
  let params = new URLSearchParams(window.location.search);
  let someParam = params.get('someParam');
  return someParam;
}

Hinweis : Es wird nicht von allen Plattformen unterstützt und scheint von eckigen Dokumenten im Status "EXPERIMENTELL" zu sein

Zunächst einmal habe ich bei der Arbeit mit Angular2 festgestellt, dass die URL mit einer Abfragezeichenfolge lautet /path;query=value1

So greifen Sie auf eine Komponente zu, die Sie verwenden So ist dies, aber jetzt folgt ein Codeblock:

    constructor(params: RouteParams){
    var val = params.get("query");
    }

Dies ist kein Standardverhalten, warum es beim Laden der Komponente entfernt wird. Ich habe in einem sauberen Testprojekt speziell eingecheckt und wurde nicht umgeleitet oder geändert. Ist es eine Standardroute oder etwas anderes, das das Routing besonders macht?

Weitere Informationen zum Routing mit Abfragezeichenfolgen und Parametern finden Sie im Angular2-Lernprogramm unter https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

Sie können die Abfrageparameter abrufen, wenn Sie die URL mit ActivatedRoute wie folgt übergeben: -

URL: - http: /domain.com? test = abc

import { Component } from '@angular/core';
import { ActivatedRoute }     from '@angular/router';

@Component({
  selector: 'my-home'
})
export class HomeComponent {

  constructor(private sharedServices : SharedService,private route: ActivatedRoute) { 
    route.queryParams.subscribe(
      data => console.log('queryParams', data['test']));
  }

}

URL-Parameter als Objekt abrufen.

import { Router } from '@angular/router';
constructor(private router: Router) {
    console.log(router.parseUrl(router.url));
}

Wenn Sie den Abfrageparameter nur einmal abrufen möchten, verwenden Sie am besten die Methode take , damit Sie sich keine Gedanken über die Abmeldung machen müssen. Hier ist der einfache Ausschnitt: -

constructor(private route: ActivatedRoute) {
  route.snapshot.queryParamMap.take(1).subscribe(params => {
     let category = params.get('category')
     console.log(category);
  })
}

Hinweis: Entfernen Sie take (1), wenn Sie zukünftig Parameterwerte verwenden möchten.

jetzt ist es:

this.activatedRoute.queryParams.subscribe((params: Params) => {
  console.log(params);
});

Ich hoffe es wird jemand anderem helfen.

Die obige Frage besagt, dass der Wert des Abfrageparameters benötigt wird, nachdem die Seite umgeleitet wurde, und wir können davon ausgehen, dass der Snapshot-Wert (die nicht beobachtbare Alternative) ausreichend wäre.

Niemand hier erwähnte über snapshot.paramMap.get aus der offiziellen Dokumentation .

this.route.snapshot.paramMap.get('id')

Fügen Sie vor dem Senden Folgendes in die Komponente zum Senden / Umleiten ein:

import { Router } from '@angular/router';

dann wie folgt umleiten ( hier dokumentiert ):

this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);

oder einfach:

this.router.navigate(['/heroes', heroId ]);

Stellen Sie sicher, dass Sie dies in Ihrem Routing-Modul hinzugefügt haben, wie hier dokumentiert :

 { path: 'hero/:id', component: HeroDetailComponent }

Und schließlich in Ihrer Komponente, die den Abfrageparameter verwenden muss

• Importe hinzufügen ( hier dokumentiert ):

  import { Router, ActivatedRoute, ParamMap } from '@angular/router';

• ActivatedRoute injizieren

(Die Dokumentation importiert auch switchMap und injiziert Router und HeroService. Sie werden jedoch nur für eine beobachtbare Alternative benötigt. Sie werden NICHT benötigt, wenn Sie eine Snapshot-Alternative wie in unserem Fall verwenden.)

    constructor(
      private route: ActivatedRoute
    ) {}

• und erhalten Sie den Wert, den Sie benötigen ( hier dokumentiert ):

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
  }

HINWEIS: WENN SIE EINEM ROATING-MODUL EINEM FUNKTIONSMODUL HINZUFÜGEN (WIE IN DER DOKUMENTATION ANGEZEIGT), STELLEN SIE SICHER, DASS IN APP.MODULE.ts DAS ROUTING-MODUL VOR dem AppRoutingModule (oder einer anderen Datei mit App-Routen auf Root-Ebene) IN IMPORTS: [] KOMMT. Andernfalls werden keine Funktionsrouten gefunden (da sie nach {path: '**', redirectTo: '/ not-found'} kommen würden und Sie nur eine nicht gefundene Nachricht sehen würden).

Sie müssen nur ActivatedRoute in den Konstruktor einfügen und dann einfach auf params oder queryParams zugreifen

constructor(private route:ActivatedRoute){}
ngOnInit(){
        this.route.queryParams.subscribe(params=>{
        let username=params['username'];
      });
 }

In einigen Fällen gibt es in NgOnInit nichts ... möglicherweise aufgrund eines Init-Aufrufs vor der Initialisierung von Parametern. In diesem Fall können Sie dies erreichen, indem Sie Observable bitten, mit der Funktion debounceTime (1000) einige Zeit zu warten.

zB =>

 constructor(private route:ActivatedRoute){}
    ngOnInit(){
            this.route.queryParams.debounceTime(100).subscribe(params=>{
            let username=params['username'];
          });
     }

debounceTime () Gibt einen Wert von der Quelle aus, der erst nach Ablauf einer bestimmten Zeitspanne ohne weitere Quellenemission beobachtet werden kann

Sie können keinen Parameter vom RouterState abrufen, wenn er nicht in der Route definiert ist. In Ihrem Beispiel müssen Sie also den Querystring analysieren ...

Hier ist der Code, den ich verwendet habe:

let re = /[?&]([^=#&]+)=([^&#]*)/g;
let match;
let isMatch = true;
let matches = [];
while (isMatch) {
    match = re.exec(window.location.href);
    if (match !== null) {
        matches[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
        if (match.index === re.lastIndex) {
            re.lastIndex++;
        }
    }
    else {
        isMatch = false;
    }
}
console.log(matches);

Abfrage und Pfad (Winkel 8)

Wenn Sie eine URL wie https://myapp.com/owner/123/show?height=23 haben, verwenden Sie

combineLatest( [this.route.paramMap, this.route.queryParamMap] )
  .subscribe( ([pathParams, queryParams]) => {
    let ownerId = pathParams.get('ownerId');    // =123
    let height  = queryParams.get('height');    // =height
    // ...
  })

AKTUALISIEREN

Wenn Sie verwenden this.router.navigate([yourUrl]);und Ihre Abfrageparameter in eine yourUrlZeichenfolge eingebettet sind, codiert Angular eine URL und Sie erhalten so etwas wie https://myapp.com/owner/123/show%3Fheight%323 - und die obige Lösung führt zu einem falschen Ergebnis ( queryParams ist leer und Abfrageparameter können an den letzten Pfadparameter geklebt werden, wenn er sich am Pfadende befindet. In diesem Fall wird die Art und Weise der Navigation auf diesem

this.router.navigateByUrl(yourUrl);