Al inyectar una instancia de ActivatedRoute , uno puede suscribirse a una variedad de observables, incluidos queryParams y params observables:

 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 SOBRE LA BAJA DE SUSCRIPCIÓN

@Reto y @codef0rmer habían señalado con toda razón que, según los documentos oficiales, en este caso no es necesario cancelar la unsubscribe() dentro del método onDestroy() de los componentes. Esto ha sido eliminado de mi ejemplo de código. (vea el cuadro de alerta azul en este tutorial)

Cuando una URL es así http://stackoverflow.com?param1=value

Puede obtener el parámetro 1 con el siguiente código:

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

Aunque la pregunta especifica la versión beta 7 , esta pregunta también aparece como el principal resultado de búsqueda en Google para frases comunes como parámetros de consulta angulares 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 drásticamente. Primero necesita inyectar una dependencia llamada Router en los parámetros de su constructor como:

 constructor(private router: Router) { }

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

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

En este ejemplo, leemos el ID de parámetro de consulta de una URL como example.com?id=41 .

Todavía hay algunas cosas que notar:

1. Acceder a la propiedad de params como params['id'] siempre devuelve una cadena , y esto se puede convertir en un número prefijándolo con + .
2. La razón por la que los parámetros de consulta se recuperan 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, se generará un nuevo evento al que nos hemos suscrito y, por lo tanto, podemos reaccionar ante los cambios en consecuencia.