包含路径参数的角度路由路径供组件使用

Question

我正在尝试实现一个 Angular 组件，它可以从 url 中提取路径参数，即/update-tap/some-url-path-param-to-be-extracted。我认为实现这一点的正确方法是在路由模块中使用一些正则表达式，但这不起作用。这是我的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 { }

Answer 1

在你的ngOnInit方法中写代码

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

从 - 更新以下路线

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

到

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

在组件构造器中

constructor(public _route: ActivatedRoute){ 
}