Angular route path containing path params for component to use

0
votes

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 { }
1
angularrestangular6url-routing

1 Answers

1
votes

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){ 
}