Search code examples
angularrestangular6url-routing

Angular route path containing path params for component to use


I'm trying to implement an Angular component which can extract the path param from the url, i.e. /update-tap/some-url-path-param-to-be-extracted. I figured the right way to implement this was in the routing module with some regular expression, but this doesn't work. Here is my app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BeerEditorComponent } from './beer-editor/beer-editor.component';
import { BeerListComponent } from './beer-list/beer-list.component';
import { TapUpdaterComponent } from './tap-updater/tap-updater.component';

const routes: Routes = [
  {path: '', redirectTo: 'beer-list', pathMatch: 'full'},
  {path: 'beer-list', component: BeerListComponent},
  {path: 'create-beer', component: BeerEditorComponent},
  {path: 'update-tap/*', component: TapUpdaterComponent}
];

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

Solution

  • In you ngOnInit method write code like

    this._route.params.subscribe(params => {
        const action = params['myParam'];
    };
    

    Update following route from -

    {path: 'update-tap/*', component: TapUpdaterComponent}
    

    to

    {path: 'update-tap/:myParam', component: TapUpdaterComponent}
    

    In Component constructer

    constructor(public _route: ActivatedRoute){ 
    }