typescript - Kuinka saada kyselyparametrit URL-osoitteesta Angular 2:ssa?

Käytän angular2.0.0-beta.7:ää. Kun komponentti ladataan polussa kuten /path?query=value1, se ohjataan /path -osoitteeseen. Miksi GET-parametrit poistettiin? Kuinka voin säilyttää parametrit?

Minulla on virhe reitittimissä. Jos minulla on pääreitti kuten

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

ja lapseni reitti kuten

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

sitten en voi saada parametreja TodoListComponentissä. Voin saada

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

mutta haluan klassisen

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

Vastaus #1

Injektoimalla instanssin ActivatedRoute voi tilata erilaisiin observables-arvoihin, mukaan lukien queryParams ja 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);
      });
  }

}

HUOMAUTUS MITEN PERUUTTAA TILAUS

@Reto ja @codef0rmer ovat aivan oikein huomauttaneet, että virallisten dokumenttien mukaan unsubscribe() komponentin onDestroy()-metodissa ei ole tarpeen tässä tapauksessa. Tämä on poistettu koodiesimerkistäni. (katso tämän oppaan sininen ilmoituslaatikko)

Vastaus #2

Kun URL on tällainen http://stackoverflow.com?param1=value

Voit saada parametrin 1 seuraavalla koodilla:

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

Vastaus #3

Vaikka kysymyksessä mainitaan versio beta 7, tämä kysymys nousee myös Googlen suosituimpien hakutulosten joukkoon yleisillä ilmauksilla kuten angular 2 query parameters. Tämän vuoksi tässä on vastaus uusimmalle reitittimelle (tällä hetkellä alpha.7).

Tapa, jolla parametrit luetaan, on muuttunut huomattavasti. Ensin sinun täytyy injektoida riippuvuus nimeltä Router konstruktori-parametreihisi seuraavasti:

constructor(private router: Router) { }

ja sen jälkeen voimme tilata kyselyparametrit ngOnInit-metodissamme (konstruktori on myös ok, mutta ngOnInit tulisi käyttää testattavuuden vuoksi) näin

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

Tässä esimerkissä luemme kyselyparametrin id URL-osoitteesta kuten example.com?id=41.

On vielä muutamia asioita, joita kannattaa huomioida:

  1. Pääsy params-olion ominaisuuteen kuten params['id'] palauttaa aina merkkijonon, ja tämän voi muuntaa luvuksi lisäämällä eteen +.
  2. Syy siihen, miksi kyselyparametrit haetaan havaittavalla (observable), on se, että se mahdollistaa saman komponentti-instanssin uudelleenkäytön sen sijaan, että ladattaisiin uusi. Joka kerta kun kyselyparametri muuttuu, se aiheuttaa uuden tapahtuman, johon olemme tilanneet, ja näin voimme reagoida muutoksiin asianmukaisesti.

Vastaus #4

Pidin todella paljon @StevePaulin vastauksesta, mutta voimme tehdä saman ilman ylimääräisiä tilaaminen/tilauksen peruuttaminen -kutsuja.

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
}

Vastaus #5

Lähettää kyselyparametrit

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

Vastaanottaa kyselyparametrit

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

Virallinen lähde

Vastaus #6

Hei, voit käyttää URLSearchParamsia, voit lukea siitä lisää täältä.

tuoda :

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

ja toiminto:

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

Huomautus: Kaikki alustat eivät tue sitä, ja Angularin dokumentaation mukaan se näyttää olevan "KOKEELLINEN" tilassa

Vastaus #7

Hae URL-parametri objektina.

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

Aiheeseen liittyviä artikkeleita