typescript - Kako dobiti parametre upita iz URL-a u Angular 2?

Koristim angular2.0.0-beta.7. Kada se komponenta učita na putanji poput /path?query=value1, ona se preusmjeri na /path. Zašto su GET parametri uklonjeni? Kako mogu sačuvati parametre?

Imam grešku u usmjerivačima. Ako imam glavnu rutu poput

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

i moja dječja ruta poput

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

onda ne mogu dobiti parametre u TodoListComponent. Mogu dobiti

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

ali želim klasično

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

Odgovor #1

Ubacivanjem instance ActivatedRoute moguće je pretplatiti se na razne observables, uključujući queryParams i params observable:

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

}

NAPOMENA O ODJAVI

@Reto i @codef0rmer su sasvim ispravno ukazali na to da, prema službenoj dokumentaciji, unsubscribe() unutar onDestroy() metode komponenti nije potreban u ovom slučaju. To je uklonjeno iz mog primjera koda. (pogledajte plavi okvir s upozorenjem u ovom tutorijalu)

Odgovor #2

Kada je URL ovakav http://stackoverflow.com?param1=value

Parametar 1 možete dobiti sljedećim kodom:

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

Odgovor #3

Iako pitanje specificira verziju beta 7, ovo pitanje također se pojavljuje kao vrhunski rezultat pretraživanja na Googleu za uobičajene izraze poput angular 2 parametri upita. Iz tog razloga, evo odgovora za najnoviji usmjerivač (trenutno u alpha.7).

Način na koji se parametri čitaju značajno se promijenio. Prvo morate ubaciti ovisnost nazvanu Router u parametre vašeg konstruktora kao:

constructor(private router: Router) { }

a nakon toga možemo se pretplatiti na parametre upita u našoj ngOnInit metodi (konstruktor je također u redu, ali ngOnInit bi trebao biti korišten zbog testabilnosti) kao

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

U ovom primjeru čitamo parametar upita id iz URL-a kao example.com?id=41.

Još uvijek ima nekoliko stvari koje treba primijetiti:

  1. Pristupanje svojstvu params poput params['id'] uvijek vraća string, a to se može pretvoriti u broj dodavanjem + ispred.
  2. Razlog zbog kojeg se parametri upita dohvaćaju pomoću observable-a je taj što omogućuje ponovno korištenje iste instance komponente umjesto učitavanja nove. Svaki put kada se parametar upita promijeni, to će uzrokovati novi događaj na koji smo se pretplatili i tako možemo odgovarati na promjene u skladu s tim.

Odgovor #4

Baš mi se svidio @StevePaulov odgovor, ali to možemo napraviti i bez suvišnog poziva subscribe/unsubscribe.

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
}

Odgovor #5

Za slanje parametara upita

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

Za primanje parametara upita

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

Službeni izvor

Odgovor #6

Bok, možeš koristiti URLSearchParams, možeš pročitati više o tome ovdje.

import :

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

i funkcija:

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

Obavijest: Nije podržano na svim platformama i čini se da je u "EKSPERIMENTALNOM" stanju prema Angular dokumentaciji

Odgovor #7

Dohvati URL parametar kao objekt.

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

Povezani članci