¿Cómo obtener el parámetro en la ruta Angular2 de forma angular?

Solución:

Actualización: septiembre de 2019

Como han mencionado algunas personas, los parámetros en paramMap se debe acceder usando el comando común MapAPI:

Para obtener una instantánea de los parámetros, cuando no le importa que puedan cambiar:

this.bankName = this.route.snapshot.paramMap.get('bank');

Para suscribirse y recibir alertas sobre cambios en los valores de los parámetros (generalmente como resultado de la navegación del enrutador)

this.route.paramMap.subscribe( paramMap => {
    this.bankName = paramMap.get('bank');
})

Actualización: agosto de 2017

Desde Angular 4, params han quedado obsoletos a favor de la nueva interfaz paramMap. El código para el problema anterior debería funcionar si simplemente sustituye uno por el otro.

Respuesta original

Si se inyecta ActivatedRoute en su componente, podrá extraer los parámetros de la ruta

    import {ActivatedRoute} from '@angular/router';
    ...
    
    constructor(private route:ActivatedRoute){}
    bankName:string;
    
    ngOnInit(){
        // 'bank' is the name of the route parameter
        this.bankName = this.route.snapshot.params['bank'];
    }

Si espera que los usuarios naveguen de un banco a otro directamente, sin navegar primero a otro componente, debe acceder al parámetro a través de un observable:

    ngOnInit(){
        this.route.params.subscribe( params =>
            this.bankName = params['bank'];
        )
    }

Para ver los documentos, incluidas las diferencias entre los dos, consulte este enlace y busque “ruta activada“

A partir de Angular 6+, esto se maneja de manera ligeramente diferente a las versiones anteriores. Como menciona @BeetleJuice en la respuesta anterior, paramMap es una nueva interfaz para obtener parámetros de ruta, pero la ejecución es un poco diferente en las versiones más recientes de Angular. Suponiendo que esto está en un componente:

private _entityId: number;

constructor(private _route: ActivatedRoute) {
    // ...
}

ngOnInit() {
    // For a static snapshot of the route...
    this._entityId = this._route.snapshot.paramMap.get('id');

    // For subscribing to the observable paramMap...
    this._route.paramMap.pipe(
        switchMap((params: ParamMap) => this._entityId = params.get('id'))
    );

    // Or as an alternative, with slightly different execution...
    this._route.paramMap.subscribe((params: ParamMap) =>  {
        this._entityId = params.get('id');
    });
}

Prefiero usar ambos porque luego, en la carga directa de la página, puedo obtener el parámetro de ID, y también si navego entre entidades relacionadas, la suscripción se actualizará correctamente.

Fuente en Angular Docs

---

---

Utiliza Nuestro Buscador