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

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

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

Angular route path containing path params for component to use

rest

url-routing

angular

angular6