Pregunta ¿Cómo obtener los parámetros de consulta de url en angular-5?


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

¿Alguna idea sobre cómo lograr que los parámetros de consulta funcionen?

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 correcta en un nuevo entorno angular.

[actualizar:] Mi aplicación principal parece     @Componente({...})     clase de exportación AppComponent implementa OnInit {

  constructor(private route: ActivatedRoute) {}

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

33
2017-11-23 12:36


origen


Respuestas:


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 a las variables de ruta se accede mediante "this.route.snapshot.params"

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

65
2018-01-06 07:35



Esta es la solución más limpia para mí

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

export class MyComponent {
  constructor(
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    const firstParam: string = this.route.snapshot.queryParamMap.get('firstParamKey');
    const secondParam: string = this.route.snapshot.queryParamMap.get('secondParamKey');
  }
}

6
2018-06-23 01:57



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

4
2017-11-23 12:52



su trabajo para mí:

constructor(private route: ActivatedRoute) {}

ngOnInit()
{
    this.route.queryParams.subscribe(map => map);
    this.route.snapshot.queryParams; 
}

mira más opciones ¿Cómo obtener params de consulta de url en angular2?


2
2018-01-06 22:23



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

El siguiente código funciona muy bien para mi uso y no requiere módulos adicionales ni 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 productos:

param1 = hello
param2 = 123

1
2018-05-03 16:51



Cuando tiene un objeto de ruta vacío, se debe principalmente al hecho de que no está utilizando un 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.

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

Antes de eso, asegúrese de tener listo su param de consulta en el enrutamiento de la aplicación> que exporta la clase Ruta utilizada por el componente de la aplicación:

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

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


0
2017-11-23 16:23



Ten cuidado con tus rutas Un "redirectTo" eliminará cualquier parámetro de consulta.

const appRoutes: Routes [
 {path: "one", component: PageOneComponent},
 {path: "two", component: PageTwoComponent},
 {path: "", redirectTo: "/one", pathMatch: full},
 {path: "**", redirectTo: "/two"}
]

Llamé a mi componente principal con parámetros de consulta como "/ main? Param1 = a & param2 = b y supongo que mis parámetros de consulta llegan en el método" ngOnInit () "en el componente principal antes de que el reenvío de redireccionamiento entre en vigencia.

Pero esto está mal. La redirección vendrá antes, soltar los parámetros de consulta y llamar al método ngOnInit () en el componente principal sin parámetros de consulta.

Cambié la tercera línea de mis rutas a

{path: "", component: PageOneComponent},

y ahora mis parámetros de consulta son accesibles en los componentes principales ngOnInit y también en PageOneComponent.


0
2017-11-24 08:53



Encontrado en: Los componentes principales obtienen Parámetros vacíos de ActivatedRoute

Trabajó para mi:

import {Component, OnDestroy, OnInit} from '@angular/core';
import { Router, ActivatedRoute, Params, RoutesRecognized } from '@angular/router';

@Component({
  selector: 'app-navigation-bar',
  templateUrl: './navigation-bar.component.html',
  styleUrls: ['./navigation-bar.component.scss']
})
export class NavigationBarComponent implements OnInit, OnDestroy {
  private sub: any;
  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    this.sub = this.router.events.subscribe(val => {
      if (val instanceof RoutesRecognized) {
        console.log(val.state.root.firstChild.params);
      }
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

}

0
2017-11-26 16:32