route - ¿Cómo obtener parámetros de consulta de URL en Angular 5?




dynamic title angular 5 (8)

Cuando tiene un objeto de ruta vacío, se debe principalmente al hecho de que no está utilizando una salida de enrutador en su app.component.html.

Sin esto, no podrá obtener un objeto de ruta significativo con subObjetos no vacíos, particularmente params y queryParams.

Intente agregar <router-outlet><router-outlet> justo antes de llamar a su <app-main-component></app-main-component>

Antes de eso, asegúrese de tener su parámetro de consulta listo en el enrutamiento de aplicaciones> que exporta la ruta de clase utilizada por el componente de la aplicación:

param: '/param/:dynamicParam', path: MyMainComponent

Lo último, por supuesto, para obtener su parámetro, yo personalmente uso this.route.snapshot.params.dynamicParam donde dynamicParam es el nombre utilizado en su componente de enrutamiento de aplicaciones :)

Estoy usando angular 5.0.3, me gustaría iniciar mi aplicación con un montón de parámetros de consulta. como "/ app? param1 = hallo & param2 = 123". Cada consejo dado en ¿Cómo obtener parámetros de consulta de url en angular2? no funciona para mi

¿Alguna idea de cómo hacer funcionar los parámetros de consulta?

private getQueryParameter(key: string): string {
  const parameters = new URLSearchParams(window.location.search);
  return parameters.get(key);
}

Esta función privada me ayuda a obtener mis parámetros, pero no creo que sea la forma correcta en un nuevo entorno angular.

[actualización:] Mi aplicación principal se parece a @Component ({...}) clase de exportación AppComponent implementa OnInit {

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // would like to get query parameters here...
    // this.route...
  }
}

En Angular 5, se accede a los parámetros de consulta suscribiéndose a this.route.queryParams.

Ejemplo: "/ app? Param1 = hallo & param2 = 123"

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    console.log('Called Constructor');
    this.route.queryParams.subscribe(params => {
        this.param1 = params['param1'];
        this.param2 = params['param2'];
    });
}

mientras que "this.route.snapshot.params" accede a las variables de ruta

Ejemplo: "/ param1 /: param1 / param2 /: param2"

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    this.param1 = this.route.snapshot.params.param1;
    this.param2 = this.route.snapshot.params.param2;
}

Me encontré con esta pregunta cuando estaba buscando una solución similar, pero no necesitaba nada como enrutamiento a nivel de aplicación completa o más módulos importados.

El siguiente código funciona muy bien para mi uso y no requiere módulos adicionales o importaciones.

  GetParam(name){
    const results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if(!results){
      return 0;
    }
    return results[1] || 0;
  }

  PrintParams() {
    console.log('param1 = ' + this.GetParam('param1'));
    console.log('param2 = ' + this.GetParam('param2'));
  }

http://localhost:4200/?param1=hello&param2=123 salidas:

param1 = hello
param2 = 123

Sé que OP solicitó la solución Angular 5, pero para todos ustedes que se topan con esta pregunta para las versiones angulares más nuevas (6+). Citando los docs , con respecto a ActivatedRoute.queryParams (en los que se basan la mayoría de las otras respuestas):

Dos propiedades antiguas aún están disponibles. Son menos capaces que sus reemplazos, desalentados, y pueden ser desaprobados en una futura versión angular.

params: un observable que contiene los parámetros obligatorios y opcionales específicos de la ruta. Use paramMap en su lugar.

queryParams: un observable que contiene los parámetros de consulta disponibles para todas las rutas. Utilice queryParamMap en su lugar.

Según los Docs , la forma simple de obtener los parámetros de consulta se vería así:

ngOnInit() {
    this.param1 = this.route.snapshot.paramMap.get('param1');
    this.param2 = this.route.snapshot.paramMap.get('param2');
}

Para conocer formas más avanzadas (por ejemplo, reutilización avanzada de componentes), consulte this capítulo de Documentos.

EDITAR:

Como se indicó correctamente en los comentarios a continuación, esta respuesta es incorrecta, al menos para el caso especificado por OP.

OP solicita obtener parámetros de consulta globales (/ app? Param1 = hallo & param2 = 123); en este caso, debe usar queryParamMap (al igual que en la respuesta @ dapperdan1985).

paramMap, por otro lado, se usa en parámetros específicos de la ruta (por ejemplo, / app /: param1 /: param2, lo que resulta en / app / hallo / 123).

Gracias a @JasonRoyle y @daka por señalarlo.


Si no está utilizando el enrutador angular, intente con la querystring . Instalarlo

npm install --save querystring

a su proyecto En tu componente haz algo como esto

import * as qs from 'querystring';
...
ngOnInit() {
   const params = qs.parse(window.location.search.substring(1));
   ...
}

La substring(1) es necesaria porque si tiene algo como esto '/mypage?foo=bar' entonces el nombre de la clave será ?foo


También puede usar HttpParams , como:

  getParamValueQueryString( paramName ) {
    const url = window.location.href;
    let paramValue;
    if (url.includes('?')) {
      const httpParams = new HttpParams({ fromString: url.split('?')[1] });
      paramValue = httpParams.get(paramName);
    }
    return paramValue;
  }


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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    console.log(this.route.snapshot.queryParamMap);
}

ACTUALIZAR

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

export class LoginComponent {
    constructor(private router: Router) {
        const snapshot: RouterStateSnapshot = router.routerState.snapshot;
        console.log(snapshot);  // <-- hope it helps
    }
}




angular-routing