¿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 tener 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 manera angular.

Cualquier ayuda sería apreciada. Gracias

Actualización: septiembre de 2019

Como algunas personas han mencionado, los parámetros en paramMap se debe acceder usando el 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 en 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 te inyectas 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 los documentos, incluidas las diferencias entre los dos. echa un vistazo a este enlace y busca “ruta activada“

A partir de Angular 6+, esto se maneja de forma 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 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

Este tema ya es bastante antiguo, pero aún está en la cima de mis resultados del motor de búsqueda. Estoy bastante seguro de que las formas que se han mostrado aquí ya funcionan. Pero algunos de ellos están desactualizados o incompletos. Así que este es un ejemplo completo actualizado, que con suerte te ayudará. Llamo al componente receptor de parámetros PersonComponent. La primera parte es tuya Rutas muy probablemente definido en aplicación.módulo.ts (aplicación-routing.module.ts):

const routes: Routes = [
{path: "/", component: HomeComponent}, 
{path: "person/name/:personName", component: PersonComponent}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Observe la :nombrePersona en la ruta para PersonComponent, esta es la clave que tenemos que buscar, puedes llamarla como quieras. Luego use esta ruta en la parte HTML de otro (o el mismo) componente:

<a routerLink="person/name/Mario">This is Mario</a>
<a routerLink="person/name/Luigi">This is Luigi</a>
<a routerLink="person/name/Bowser">This is Bowser</a>

Aquí el :nombrePersona se reemplaza con los nombres reales. El último es leer este parámetro en el PersonComponent

import {ActivatedRoute} from "@angular/router";

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.scss']
})
export class PersonComponent {

  constructor(route: ActivatedRoute) {
    const name = route.snapshot.paramMap.get('personName');
    console.log(name)
    //do whatever you want with it
  }
}

Puedes ver que el :nombrePersona desde el Rutas se utiliza como una clave, para obtener el valor de la paramMap.

Puede probar esto para obtener el parámetro de ruta:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {

  constructor(private activeRoute: ActivatedRoute) { 
    this.activeRoute.queryParams.subscribe((qp) => {
      console.log('Get Router Params:', this.activeRoute.snapshot.params.bank);
    });
  }

  ngOnInit(): void {
  }

}

Puede consultar más detalles de la ruta URL aquí

En lugar de usar paramMap, también puede usar un Route Resolver, aunque esto puede ser un poco excesivo y generalmente se usa para obtener datos durante el proceso de navegación…

resolución de configuración

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';

import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class LastUrlPathResolver implements Resolve<Observable<string>> {

  constructor(activatedRouteSnapshot: ActivatedRouteSnapshot){}

  resolve(): Observable<string> {
    return activatedRouteSnapshot.url[activatedRouteSnapshot.url.length-1]
  }
}

configurar rutas

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { NewsResolver } from './news.resolver';

import { TopComponent } from './top/top.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent
  },
  {
    path: 'top',
    component: TopComponent,
    resolve: { message: LastUrlPathResolver }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

úsalo como

import { Component, OnInit } from '@angular/core';

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

@Component({ ... })
export class TopComponent implements OnInit {
  data: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.data = this.route.snapshot.data;
  }
}

encuentra más aquí
https://www.digitalocean.com/community/tutorials/angular-route-resolver

Sí, seguramente puedes obtener el parámetro utilizando la forma Angular. Angular proporciona 2 formas de obtener el valor del parámetro de la URL.

1. Usando ActivatedRoute de @angular/router. Por favor, compruebe el código a continuación para el mismo. (https://angular.io/api/router/ActivatedRouteSnapshot)

   this.route.snapshot.paramMap.get(‘id’);

2. Usando el paramMap Observable (https://angular.io/api/router/ParamMap)

   this.route.paramMap.subscribe((params: ParamMap) => { this.id = +params.get(‘id’) });

Consulte también los enlaces de documentación. Y antes de usar this.router, importe ActivatedRoute desde ‘@angular/router’ para la primera opción e importe ActivatedRoute, ParamMap para la segunda opción. A continuación se muestra el ejemplo.

import { ActivatedRoute} from '@angular/router'

import { ActivatedRoute, ParamMap } from '@angular/router'

Desde Angular 16, puede vincular la información de la ruta a las entradas de los componentes, consulte el enlace.

const appRoutes: Routes = [
    { path: 'companies/:name', component: CompaniesComponent },
]

Uso de entradas de componentes:

@Component({})
export class CompaniesComponent implements OnInit {
    /* 
        We can use the same name as the query param
        Example url: http://localhost:4200/companies/my-bank
    */
    @Input() name?: string; // we can use the same name as the query param

    /* 
        Or we can use a different name
        Example url: http://localhost:4200/companies/my-bank
    */
    @Input('name') queryParam?: string; // we can also use a different name

    ngOnInit() {
        // do something with the query
    }
}