Jak uzyskać parametry zapytania z adresu URL w Angular 2?

Używam angular2.0.0-beta.7. Gdy składnik jest ładowany na ścieżkę, tak jak /path?query=value1jest przekierowywany /path. Dlaczego usunięto parametry GET? Jak mogę zachować parametry?

Mam błąd w routerach. Jeśli mam główną trasę jak

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

i moja droga dziecka jak

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

wtedy nie mogę uzyskać parametrów w TodoListComponent. Jestem w stanie zdobyć

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

ale chcę klasykę

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

Przez wstrzyknięcie wystąpienia ActivatedRoutemożna subskrybować różne obserwowalne, w tym a queryParamsi paramsobserwowalne:

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

}

UWAGA DOTYCZĄCA BRAKU SUBSKRYPCJI

@Reto i @ codef0rmer całkiem słusznie zauważyli, że zgodnie z oficjalnymi dokumentami metoda unsubscribe()wewnątrz składników nie onDestroy()jest w tym przypadku konieczna. Zostało to usunięte z mojej próbki kodu. (patrz niebieskie pole ostrzeżenia w tym samouczku)

Gdy adres URL taki jak ten http://stackoverflow.com?param1=value

Możesz pobrać param1 po kodzie:

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

Chociaż pytanie określa wersję beta 7 , to pytanie pojawia się również jako najlepszy wynik wyszukiwania w Google dla typowych wyrażeń, takich jak parametry zapytania kątowego 2 . Z tego powodu oto odpowiedź na najnowszy router (obecnie w wersji alfa 7 ).

Sposób odczytu parametrów zmienił się diametralnie. Najpierw musisz wstrzyknąć zależność wywoływaną Routerw parametrach konstruktora, takich jak:

constructor(private router: Router) { }

a potem możemy zasubskrybować parametry zapytania w naszej ngOnInitmetodzie (konstruktor też jest w porządku, ale ngOnInitpowinien być użyty do testowania) jak

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

W tym przykładzie czytamy identyfikator parametru zapytania z adresu URL typu example.com?id=41.

Wciąż pozostaje kilka rzeczy do zauważenia:

1. Dostęp do właściwości paramslike params['id']zawsze zwraca ciąg , który można przekonwertować na liczbę , poprzedzając go znakiem +.
2. Powodem, dla którego parametry zapytania są pobierane z możliwym do zaobserwowania, jest to, że umożliwia ponowne użycie tego samego wystąpienia komponentu zamiast ładowania nowego. Za każdym razem, gdy parametr zapytania zostanie zmieniony, spowoduje to nowe zdarzenie, na które zasubskrybowaliśmy, dzięki czemu możemy odpowiednio zareagować na zmiany.

Bardzo podobała mi się odpowiedź @ StevePaula, ale możemy zrobić to samo bez zbędnego połączenia z subskrypcją / anulowaniem subskrypcji.

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
}

Aby wysłać parametry zapytania

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

Aby otrzymać parametry zapytania

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

Oficjalne źródło

Cześć, możesz użyć URLSearchParams, możesz przeczytać więcej na ten temat tutaj .

import:

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

i funkcja:

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

Uwaga : nie jest obsługiwany przez wszystkie platformy i wydaje się być w stanie „EKSPERYMENTALNYM” przez kątowe dokumenty

Po pierwsze, znalazłem pracę z Angular2, że będzie to adres URL z ciągiem zapytania /path;query=value1

Aby uzyskać dostęp do tego komponentu, którego używasz Tak jest, ale teraz następuje blok kodu:

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

Co do tego, dlaczego zostałby usunięty podczas ładowania komponentu, nie jest to zachowanie domyślne. Sprawdziłem konkretnie w czystym projekcie testowym i nie zostałem przekierowany ani zmieniony. Czy jest to domyślna trasa, czy coś specjalnego w routingu?

Przeczytaj o routingu z ciągami zapytań i parametrami w samouczku Angular2 na https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

Parametry zapytania można uzyskać po przekazaniu w adresie URL za pomocą ActivatedRoute, jak podano poniżej: -

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

}

Uzyskaj parametr URL jako obiekt.

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

Jeśli chcesz uzyskać parametr zapytania tylko raz, najlepszym sposobem jest użycie metody take , dzięki czemu nie musisz się martwić o rezygnację z subskrypcji. Oto prosty fragment: -

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

Uwaga: Usuń take (1), jeśli chcesz użyć wartości parametrów w przyszłości.

teraz jest:

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

Mam nadzieję, że pomoże to komuś innemu.

Pytanie powyżej stwierdza, że ​​wartość parametru zapytania jest potrzebna po przekierowaniu strony i możemy założyć, że wartość migawki (nieobserwowalna alternatywa) byłaby wystarczająca.

Nikt tutaj nie wspomniał o snapshot.paramMap.get z oficjalnej dokumentacji .

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

Więc przed wysłaniem dodaj to w komponencie wysyłającym / przekierowującym:

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

następnie przekieruj jako jedno z nich ( tutaj udokumentowane ):

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

lub po prostu:

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

Upewnij się, że dodałeś to do swojego modułu routingu, jak tu udokumentowano :

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

I wreszcie w komponencie, który musi użyć parametru zapytania

• dodaj import (udokumentowany tutaj ):

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

• wstrzyknąć ActivatedRoute

(dokumentacja importuje również SwitchMap, a także wstrzykuje Routera i HeroService - ale są one potrzebne tylko dla obserwowalnej alternatywy - NIE są one potrzebne, gdy używasz alternatywnej migawki, jak w naszym przypadku):

    constructor(
      private route: ActivatedRoute
    ) {}

• i uzyskaj potrzebną wartość (udokumentowaną tutaj ):

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

UWAGA: JEŚLI DODIESZ MODUŁ ROUTINGU DO MODUŁU FUNKCJI (JAK WYKAZANO W DOKUMENTACJI) UPEWNIJ SIĘ, ŻE W APP.MODULE.ts, ŻE MODUŁ ROUTINGU PRZYJMUJE PRZED modułem AppRoutingModule (lub innym plikiem z trasami aplikacji na poziomie administratora) W PRZYPADKU: []. INNE TRASY FUNKCJI NIE ZOSTANĄ ZNALEZIONE (TAK, JAKIE POWINNY BYĆ PO {path: '**', przekieruj do: '/ not-found'}, a zobaczysz tylko wiadomość nie znalezioną).

Musisz tylko wstrzyknąć ActivatedRoute do konstruktora, a następnie po prostu uzyskać dostęp do parametrów lub queryParams

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

W niektórych przypadkach nie daje to niczego w NgOnInit ... może z powodu wywołania init przed inicjalizacją parametrów w tym przypadku można to osiągnąć, prosząc obserwowalne, aby poczekało jakiś czas przez funkcję debounceTime (1000)

np. =>

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

debounceTime () Emituje wartość ze źródła obserwowalną dopiero po upływie określonego czasu bez emisji innej źródła

Nie możesz uzyskać parametru z RouterState, jeśli nie jest zdefiniowany w trasie, więc w twoim przykładzie musisz przeanalizować kwerendę ...

Oto kod, którego użyłem:

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

Zapytanie i ścieżka (Angular 8)

Jeśli masz adres URL taki jak https://myapp.com/owner/123/show?height=23, użyj

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

AKTUALIZACJA

W przypadku, gdy użyjesz, this.router.navigate([yourUrl]);a parametry zapytania są osadzone w yourUrlciągu, wówczas kątowy koduje adres URL i otrzymujesz coś takiego: https://myapp.com/owner/123/show%3Fheight%323 - i powyższe rozwiązanie da zły wynik ( queryParams będzie puste, a parametry zapytania można przykleić do ostatniego parametru ścieżki, jeśli znajduje się na końcu ścieżki). W takim przypadku zmień sposób nawigacji na to

this.router.navigateByUrl(yourUrl);