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

Ruta

const appRoutes: Routes = [
    { path: '', redirectTo: '/companies/unionbank', pathMatch: 'full'},
    { path: 'companies/:bank', component: BanksComponent },
    { path: '**', redirectTo: '/companies/unionbank' }
]

Componente

const NAVBAR = [
    { 
        name: 'Banks',
        submenu: [
            { routelink: '/companies/unionbank', name: 'Union Bank' },
            { routelink: '/companies/metrobank', name: 'Metro Bank' },
            { routelink: '/companies/bdo', name: 'BDO' },
            { routelink: '/companies/chinabank', name: 'China Bank' },
        ]
    },
    ...
]

Ejemplo de enlace: http://localhost:8099/#/companies/bdo

Quiero obtener String bdo en el enlace de ejemplo anterior.

Soy consciente de que puedo obtener el enlace usando window.location.href y dividirlo en una matriz. Entonces, puedo obtener el último parámetro, pero quiero saber si hay un método adecuado para hacer esto de forma angular.

Cualquier ayuda sería apreciada. Gracias

Actualización: septiembre de 2019

Como han mencionado algunas personas, se paramMapdebe acceder a los parámetros de mediante la MapAPI común :

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, paramsse han desaprobado a favor de la nueva interfaz paramMap. El código del problema anterior debería funcionar si simplemente sustituye uno por el otro.

Respuesta original

Si inyecta ActivatedRoutesu componente, podrá extraer los parámetros de 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 obtener 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 @BeetleJuice menciona en la respuesta anterior , paramMapes 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