Cómo obtener parámetros de consulta de url en angular 2?

Cuando una URL como esta http://stackoverflow.com?param1=value

Puede obtener el param1 por código siga:

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

Aunque la pregunta especifica la versión beta 7, esta pregunta también aparece como el principal resultado de búsqueda en Google para frases comunes como angular 2 query parameters. Por esa razón, aquí hay una respuesta para el enrutador más reciente (actualmente en alfa.7).

La forma en que se leen los parámetros ha cambiado dramáticamente. Primero necesitas inyectar la dependencia llamada Router en los parámetros de tu constructor como:

constructor(private router: Router) { }

Y después de eso podemos suscribirnos a la query parameters on our ngOnInit method (constructor is okay too, but ngOnInit should be used for testability) like

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

En este ejemplo leemos el parámetro de consulta id desde URL como example.com?id=41.

Todavía hay pocas cosas que notar: {[16]]}

1. Acceder a la propiedad de params como params['id']siempre devuelve una cadena , y esto se puede convertir en número prefijándolo con +.
2. La razón por la que los parámetros de consulta se obtienen con observable es que permite reutilizar la misma instancia de componente en lugar de cargar una nueva. Cada vez que se cambia el parámetro de consulta, causará un nuevo evento al que nos hemos suscrito y, por lo tanto, podemos reaccionar a los cambios en consecuencia.

Realmente me gustó la respuesta de @StevePaul, pero podemos hacer lo mismo sin una llamada externa de suscripción/cancelación de suscripción.

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
}

Para enviar parámetros de consulta

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

Para recibir parámetros de consulta

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

Fuente Oficial

Hola puedes usar URLSearchParams, puedes leer más sobre ello aquí.

Importación:

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

Y función:

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

Aviso : No es compatible con todas las plataformas y parece estar en estado "EXPERIMENTAL" por angular docs

En primer lugar, lo que he encontrado trabajando con Angular2 es que la url con una cadena de consulta sería /path;query=value1

Para acceder a él en un componente que utilice Así es esto, pero ahora sigue un bloque de código:

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

En cuanto a por qué se eliminaría cuando se carga el componente, ese no es el comportamiento predeterminado. Comprobé específicamente en un proyecto de prueba limpio y no fue redirigido o cambiado. ¿Es una ruta predeterminada u otra cosa que sea especial en el enrutamiento?

Lea acerca del enrutamiento con cadenas de consulta y parámetros en el tutorial Angular2 en https://angular.io/docs/ts/latest/guide/router.html#! # query-parameters

Puede obtener los parámetros de consulta cuando se pasan en URL usando ActivatedRoute como se indica a continuación: -

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

}

Obtener URL param como un objeto.

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

Si solo desea obtener el parámetro de consulta una vez, la mejor manera es usar el método take para que no tenga que preocuparse por cancelar la suscripción. Aquí está el fragmento simple: -

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

Nota: Remove take(1) si desea utilizar valores de parámetros en el futuro.

Ahora es:

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

No puede obtener un parámetro del RouterState si no está definido en la ruta, por lo que en su ejemplo, tiene que analizar la cadena de consultas...

Aquí está el código que usé:

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 variación de la solución de Steve Paul, prefiero evitar ivars innecesarios, por lo que para eliminar la necesidad de la llamada unsubscribe() durante ngOnDestroy, simplemente suscríbase al observable con take(1) y se liberará automáticamente después del primer valor, evitando fugas de 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);
    });
  }

}

Solo necesita inyectar ActivatedRoute en constructor y luego acceder a parámetros o queryParams sobre él

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

En algunos casos da cualquier cosa en ngOnInit ...puede ser debido a la llamada init antes de la inicialización de parámetros en este caso, puede lograr esto pidiendo a observable que espere un tiempo por función debounceTime(1000)

E. g = >

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

DebounceTime () Emite un valor de la fuente observable solo después del lapso de tiempo perticular pasado sin otra fuente de emisión

Espero que ayude a alguien más.

La pregunta anterior indica que el valor del parámetro de consulta es necesario después de que la página haya sido redirigida y podemos asumir que el valor de la instantánea (la alternativa no observable) sería suficiente.

Aquí nadie mencionó sobre snapshot.paramMap.obtener de la documentación oficial .

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

Así que antes de enviarlo agregue esto en el componente sending/re-directing:

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

Luego redirige como cualquiera (documentado aquí):

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

O simplemente:

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

Asegúrese de haber agregado esto en su módulo de enrutamiento como está documentado aquí :

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

Y finalmente, en su componente que necesita usar el parámetro de consulta

• Añadir las importaciones (documentadas aquí):

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

• Inyectar ruta activa

(la documentación también importa switchMap y también inyecta Router y HeroService, pero son necesarios para observable solo alternativa - no son necesarios cuando se utiliza alternativa instantánea como en nuestro caso):

    constructor(
      private route: ActivatedRoute
    ) {}

• Y obtenga el valor que necesita ( documentado aquí):

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

NOTA: SI AGREGA ROUTING-MODULE A UN MÓDULO DE CARACTERÍSTICAS (COMO SE MUESTRA EN LA DOCUMENTACIÓN) ASEGÚRESE DE QUE EN LA APLICACIÓN.MÓDULO.ts ESE MÓDULO DE ENRUTAMIENTO VIENE ANTES DE AppRoutingModule (u otro archivo con rutas de aplicaciones de nivel raíz) EN IMPORTS: [] . DE LO CONTRARIO, LAS RUTAS DE CARACTERÍSTICAS NO SE ENCONTRARÁN (COMO VENDRÍAN DESPUÉS DE { path:'**', redirectTo: '/not-found' } y verás solo el mensaje not-found).