formularios - router events angular 6

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

Question

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 hacerlo de forma angular.

Cualquier ayuda sería apreciada. Gracias

Answer 1

A partir de Angular 6+, esto se maneja de manera ligeramente diferente que en versiones anteriores. Como @BeetleJuice menciona 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 de página directa, puedo obtener el parámetro de ID, y también si navega entre entidades relacionadas, la suscripción se actualizará correctamente.

Fuente en documentos angulares

Answer 2

Si inyecta ActivatedRoute en su 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 banco a banco 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 los documentos, incluidas las diferencias entre los dos, echa un vistazo a este enlace y busca " enabledrute "

Actualización: Ago 2017

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