page - dynamic title angular 4

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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

Se encuentra 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();
  }

}

Answer 7

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

Answer 8

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

Answer 9

Ten cuidado con tus rutas. Un "redirectTo" eliminará | colocará 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 = by supongo que mis parámetros de consulta llegan al método" ngOnInit () "en el componente principal antes de que el reenvío de redireccionamiento surta efecto.

Pero esto está mal. La redirección vendrá antes, descarte los parámetros de consulta y llame 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 están accesibles en los componentes principales ngOnInit y también en PageOneComponent.

Answer 10

es trabajo para mi:

constructor(private route: ActivatedRoute) {}

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

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

Answer 11

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