Come ottenere parametri di query dall’URL in angular 2?

Io uso angular2.0.0-beta.7. Quando un componente viene caricato su un percorso come “/ percorso? Query = valore1” viene reindirizzato a “/ percorso”. Perché i parametri GET sono stati cancellati? Come posso conservare i parametri?

Ho un errore nei router. Se ho un percorso principale come

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

e il mio bambino si dirige come

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

Non posso ottenere parametri in TodoListComponent.

Posso ottenere la matrice

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

ma voglio il classico

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

Soluzione FINALE 2.0 angular. Sembra che RouteParams sia stato deprecato. Prova questo invece:

 import {Router, ActivatedRoute, Params} from '@angular/router'; import {OnInit, Component} from '@angular/core'; @Component({...}) export class MyComponent implements OnInit { constructor(private activatedRoute: ActivatedRoute) {} ngOnInit() { // subscribe to router event this.activatedRoute.params.subscribe((params: Params) => { let userId = params['userId']; console.log(userId); }); } } 

Se si desidera ottenere i parametri della query, sostituire this.activatedRoute.params con this.activatedRoute.queryParams

UNA NOTA SUGLI UNSUBSCRIBING

@Reto e @ codef0rmer hanno giustamente sottolineato che, come per i documenti ufficiali, in questo caso non è necessario un unsubscribe() all’interno del metodo onDestroy() . Questo è stato rimosso dal mio esempio di codice. (vedi la sezione Devo annullare l’iscrizione? di questo tutorial)

Quando un URL come questo http://stackoverflow.com?param1=value

Puoi ottenere il parametro 1 seguendo il codice:

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

Anche se la domanda specifica la versione beta 7 , questa domanda si presenta anche come risultato di ricerca principale su Google per frasi comuni come i parametri di query angolari 2 . Per questo motivo, ecco una risposta per il router più recente (attualmente in alpha.7 ).

Il modo in cui i parametri vengono letti è cambiato radicalmente. Per prima cosa è necessario iniettare una dipendenza chiamata Router nei parametri del costruttore come:

 constructor(private router: Router) { } 

e dopo di ciò possiamo sottoscrivere i parametri di query sul nostro metodo ngOnInit (anche il costruttore va bene, ma ngOnInit dovrebbe essere usato per testabilità) come

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

In questo esempio leggiamo l’ id param della query da URL come example.com?id=41 .

Ci sono ancora poche cose da notare:

  1. L’accesso alla proprietà di params come params['id'] restituisce sempre una stringa , che può essere convertita in numero anteponendo a + .
  2. Il motivo per cui i parametri della query vengono recuperati con osservabile è che consente di riutilizzare la stessa istanza del componente invece di caricarne una nuova. Ogni volta che il parametro di query viene modificato, causerà un nuovo evento a cui ci siamo iscritti e quindi possiamo reactjs di conseguenza alle modifiche.

Mi è veramente piaciuta la risposta di @ StevePaul, ma possiamo fare lo stesso senza una sottoscrizione / annullamento della sottoscrizione.

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

Per inviare parametri di query

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

Per ricevere parametri di query

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

Fonte ufficiale

Ciao, puoi usare URLSearchParams, puoi leggere di più qui .

importare:

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

e funzione:

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

Avviso : non è supportato da tutte le piattaforms e sembra essere in stato “SPERIMENTALE” da documenti angolari

Prima di tutto, quello che ho trovato che funziona con Angular2 è che l’url con una stringa di query sarebbe /path;query=value1

Per accedervi in ​​un componente che usi So is this, ma ora segue un blocco di codice:

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

Per quanto riguarda il motivo per cui verrebbe rimosso quando si carica il componente, non si tratta di un comportamento predefinito. Ho controllato in modo specifico in un progetto di test pulito e non sono stato reindirizzato o modificato. È una route predefinita o qualcos’altro che è speciale per il routing?

Leggi informazioni sul routing con stringhe e parametri di query nel tutorial di Angular2 all’indirizzo https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

È ansible ottenere i parametri della query quando passati in URL utilizzando ActivatedRoute come indicato di seguito: –

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

Ottieni il parametro URL come object.

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

Se si desidera ottenere il parametro di query una sola volta, il modo migliore è utilizzare il metodo take in modo da non doverti preoccupare della disiscrizione. Ecco il semplice frammento: –

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

Nota: rimuovere Take (1) se si desidera utilizzare i valori dei parametri in futuro.

ora è:

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

Non puoi ottenere un parametro dal RouterState se non è definito nel percorso, quindi nell’esempio devi analizzare la querystring …

Ecco il codice che ho usato:

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

Una variante alla soluzione di Steve Paul, preferisco evitare inutili ivars, quindi per rimuovere la necessità della chiamata unsubscribe() durante ngOnDestroy , basta sottoscrivere l’osservabile con take(1) e verrà automaticamente rilasciato dopo il primo valore – prevenire perdite di memoria

 import 'rxjs/add/operator/take'; import {Router, ActivatedRoute} from '@angular/router'; @Component({...}) export class MyComponent implements OnInit { constructor(private activatedRoute: ActivatedRoute) { this.activatedRoute.params.take(1).subscribe((params: any) => { let userId = params['userId']; console.log(userId); }); } } 

Hai solo bisogno di iniettare ActivatedRoute nel costruttore e quindi basta accedere a params o queryParams su di esso

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

In alcuni casi non fornisce nulla in NgOnInit … può essere a causa della chiamata init prima dell’avvio di params in questo caso è ansible ottenere ciò chiedendo osservabile di attendere qualche tempo dalla funzione debounceTime (1000)

es =>

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

debounceTime () Emette un valore dalla sorgente osservabile solo dopo che l’intervallo di tempo perticulare è passato senza un’altra emissione sorgente