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

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 Angular 2? 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 ve así

@Component({...})
export class AppComponent implements 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 las variables de ruta son accedidas por 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;
}

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

Sé que OP solicitó la solución Angular 5, pero aún así para todos ustedes que se topan con esta pregunta para las versiones angulares más nuevas (6+). Citando los documentos , 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 documentos , la forma simple de obtener los parámetros de consulta se vería así:

constructor(private route: ActivatedRoute) { }

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

Para formas más avanzadas (por ejemplo, reutilización avanzada de componentes), consulte este 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.

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

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?

Parámetros de consulta y ruta (angular 8)

Para url como https://myapp.com/user/666/read?age=23 use

import { combineLatest } from 'rxjs';
// ...

combineLatest( [this.route.paramMap, this.route.queryParamMap] )
  .subscribe( ([pathParams, queryParams]) => {
    let userId = pathParams.get('userId');    // =666
    let age    = queryParams.get('age');      // =23
    // ...
  })

ACTUALIZAR

En caso de que use this.router.navigate([someUrl]);y sus parámetros de consulta estén incrustados en una someUrlcadena, entonces angular codifica una URL y obtendrá algo como esto https://myapp.com/user/666/read%3Fage%323 - y la solución anterior dará un resultado incorrecto ( queryParams estará vacío, y los parámetros de ruta se pueden pegar al último parámetro de ruta si está al final de la ruta). En este caso, cambie la forma de navegación a este

this.router.navigateByUrl(someUrl);

Tropecé con esta pregunta cuando estaba buscando una solución similar, pero no necesitaba nada como 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 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

Angular Router proporciona el método parseUrl (url: string) que analiza url en UrlTree . Una de las propiedades de UrlTree son queryParams. Entonces puedes hacer algo como:

this.router.parseUrl(this.router.url).queryParams[key] || '';

Desafortunadamente, la solución más limpia no es la solución más extensible. En versiones recientes de Angular, se sugiere en las otras respuestas que puede obtener fácilmente los parámetros de consulta utilizando el Inyectable ActivatedRoute y utilizando específicamente la propiedad de instantánea:

this.route.snapshot.queryParamMap.get('param')

o la propiedad de suscripción (utilizada en los casos en que la cadena de consulta se actualizará, por ejemplo, navegando por los ID de usuario):

this.route.queryParamMap.subscribe(params => console.log(params));

Estoy aquí para decirles que estas soluciones tienen una falla enorme que no se ha resuelto por algún tiempo: https://github.com/angular/angular/issues/12157

Con todo, la única solución a prueba de balas es usar un buen JavaScript antiguo de vainilla. En este caso, creé un servicio para la manipulación de URL:

import { Injectable } from '@angular/core';
import { IUrl } from './iurl';

@Injectable()
export class UrlService {
    static parseQuery(url: string): IUrl {
        const query = url.slice(url.indexOf('?')+1).split('&').reduce( (acc,query) => {
            const parts = query.split('=');
            acc[parts[0]] = parts[1];
            return acc;
        }, {});

        return {
            a: query['a'],
            b: query['b'],
            c: query['c'],
            d: query['d'],
            e: query['e']
        }
    }
}

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.

Intenta agregar <router-outlet><router-outlet>justo antes de llamar a tu <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 clase Ruta utilizada por el componente Aplicación:

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

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

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 son accesibles en los componentes principales ngOnInit y también en PageOneComponent.

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

}

Simplemente tropecé con el mismo problema y la mayoría de las respuestas aquí parecen resolverlo solo para el enrutamiento interno angular, y luego algunos de ellos para parámetros de ruta que no son lo mismo que los parámetros de solicitud.

Supongo que tengo un caso de uso similar a la pregunta original de Lars.

Para mí, el caso de uso es, por ejemplo, el seguimiento de referencias:

Angular funcionando mycoolpage.com, con enrutamiento hash, por lo que mycoolpage.comredirige a mycoolpage.com/#/. Para referencia, sin embargo, un enlace como mycoolpage.com?referrer=footambién debería ser utilizable. Desafortunadamente, Angular elimina inmediatamente los parámetros de solicitud, yendo directamente a mycoolpage.com/#/.

Cualquier tipo de 'truco' con el uso de un componente vacío + AuthGuard y obtener queryParamso queryParamMap, desafortunadamente, no funcionó para mí. Siempre estaban vacíos.

Mi solución hacky terminó siendo manejar esto en un pequeño script en el index.htmlque se obtiene la URL completa, con los parámetros de solicitud. Luego obtengo el valor de parámetro de solicitud a través de la manipulación de cadenas y lo configuro en un objeto de ventana. Un servicio separado se encarga de obtener la identificación del objeto de la ventana.

script index.html

const paramIndex = window.location.href.indexOf('referrer=');
if (!window.myRef && paramIndex > 0) {
  let param = window.location.href.substring(paramIndex);
  param = param.split('&')[0];
  param = param.substr(param.indexOf('=')+1);
  window.myRef = param;
}

Servicio

declare var window: any;

@Injectable()
export class ReferrerService {

  getReferrerId() {
    if (window.myRef) {
      return window.myRef;
    }
    return null;
  }
}

Solución simple

 // in routing file
       {
            path: 'checkout/:cartId/:addressId',
            loadChildren: () => import('./pages/checkout/checkout.module').then(m => m.CheckoutPageModule)
          },

    // in Component file

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

                 constructor(
                      private _Router: ActivatedRoute
                  ) { }

                  ngOnInit() {
                    this.cartId = this._Router.snapshot.params.cartId;
                    this.addressId = this._Router.snapshot.params.addressId;
                    console.log(this.addressId, "addressId")
                    console.log(this.cartId, "cartId")
                  }

http: // localhost: 4200 / products? order = popular

Podemos acceder al parámetro de consulta de pedido de esta manera:

this.route.queryParams
      .filter(params => params.order)
      .subscribe(params => {
        console.log(params)// {order: "popular"}

        this.order = params.order;
        console.log(this.order); // popular
      });
  }

También hay queryParamMap, que devuelve un observable con un objeto paramMap.

Dada la siguiente ruta URL:

http: // localhost: 4200 / products? order = popular & filter = new

this.route.queryParamMap.subscribe(params => {
  this.orderObj = {...params.keys, ...params};
});

Fuente: https://alligator.io/angular/query-parameters/

En, creo que Angular 8:

ActivatedRoute.paramsha sido reemplazado por ActivatedRoute.paramMap ActivatedRoute.queryParamsha sido reemplazado por ActivatedRoute.queryParamMap

/*
Example below url with two param (type and name) 
URL : http://localhost:4200/updatePolicy?type=Medicare%20Insurance&name=FutrueInsurance
*/ 
  constructor(private route: ActivatedRoute) {
    //Read url query parameter `enter code here`
  this.route.queryParams.subscribe(params => {
    this.name= params['type'];
    this.type= params['name'];
    alert(this.type);
    alert(this.name);

 });

  }

Si no está utilizando el enrutador angular, intente con la cadena de consulta . 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));
   ...
}

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