typescript - versiones - install angular

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

Question

Yo uso angular2.0.0-beta.7. Cuando un componente se carga en una ruta como /path?query=value1 se redirige a /path . ¿Por qué se eliminaron los parámetros GET? ¿Cómo puedo preservar los parámetros?

Tengo un error en los enrutadores. Si tengo una ruta principal como

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

y mi hijo ruta como

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

entonces no puedo obtener parámetros en TodoListComponent. Soy capaz de conseguir

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

pero quiero el clásico

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

Answer 1

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

Answer 2

Al inyectar una instancia de ActivatedRoute uno puede suscribirse a una variedad de observables, incluidos un queryParams y un 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);
      });
  }

}

UNA NOTA RELATIVA A SUSCRIBIRSE

@Reto y @ codef0rmer habían señalado con razón que, según los documentos oficiales, una unsubscribe() dentro de los componentes del método onDestroy() es innecesaria en este caso. Esto ha sido eliminado de mi código de muestra. (Ver cuadro de alerta azul en this tutorial)

Answer 3

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

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

constructor(private router: Router) { }

y después de eso podemos suscribirnos para los parámetros de consulta en nuestro método ngOnInit (el constructor también está bien, pero ngOnInit debería usarse para la comprobabilidad) como

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

En este ejemplo, leemos la identificación del parámetro de consulta de la URL como example.com?id=41 .

Todavía hay pocas cosas que notar:

1. El acceso a la propiedad de params como params[''id''] siempre devuelve una cadena , y esta se puede convertir en número con el prefijo + .
2. La razón por la cual 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, provocará un nuevo evento al que nos hemos suscrito y, por lo tanto, podemos reaccionar ante los cambios en consecuencia.

Answer 4

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

Puede obtener el param1 por código siguiente:

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

Answer 5

Espero que ayude a alguien más.

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

Nadie aquí mencionó acerca de snapshot.paramMap.get de la documentación oficial .

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

Entonces, antes de enviarlo, agregue esto en el componente de envío / redireccionamiento:

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

luego redirija como cualquiera (documentado here ):

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 se documenta here :

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

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

• agregar importaciones (documentado here ):

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

• inyectar ruta activada

(la documentación también importa switchMap y también inyecta Router y HeroService, pero son necesarios solo para una alternativa observable; NO son necesarios cuando se utiliza la alternativa de 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 EL MÓDULO DE ENRUTAMIENTO A UN MÓDULO DE CARACTERÍSTICAS (COMO SE MUESTRA EN LA DOCUMENTACIÓN) ASEGÚRESE DE QUE EN APP.MODULE.ts ESTE MÓDULO DE ENRUTAMIENTO VIENE ANTES de AppRoutingModule (u otro archivo con rutas de aplicación de nivel raíz) EN IMPORTACIONES: []. DE LO CONTRARIO, NO SE ENCONTRARÁN RUTAS DE CARACTERÍSTICAS (COMO LLEGARÍAN DESPUÉS de {ruta: ''**'', redirigir a: ''/ no encontrado''} y solo verá un mensaje no encontrado).

Answer 6

Hola, puedes usar URLSearchParams, puedes leer más sobre esto here .

importar:

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 documentos angulares

Answer 7

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

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

Answer 8

Obtener URL param como un objeto.

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

Answer 9

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

url: - http: /dominio.com? prueba = 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'']));
  }

}

Answer 10

Realmente me gustó la respuesta de @ StevePaul, pero podemos hacer lo mismo sin una llamada 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
}

Answer 11

Si solo desea obtener el parámetro de consulta una vez, la mejor manera es usar el método take para no tener que preocuparse por la cancelación de 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: Elimine take (1) si desea usar valores de parámetros en el futuro.

Answer 12

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 , solo suscríbase al observable con take(1) y se liberará automáticamente después del primer valor, evitando pérdidas 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);
    });
  }

}

Answer 13

ahora es:

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

Answer 14

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 usa So 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 cargue el componente, ese no es el comportamiento predeterminado. Verifiqué específicamente en un proyecto de prueba limpio y no fui redirigido ni cambiado. ¿Es una ruta predeterminada o algo más que es especial sobre el enrutamiento?

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

Answer 15

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

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

En algunos casos, no da nada en NgOnInit ... tal vez debido a la llamada de inicio antes de la inicialización de los parámetros en este caso, puede lograr esto al pedirle a observable que espere un tiempo por la función debounceTime (1000)

eg =>

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

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