angular - 包含路径参数的角度路由路径供组件使用
问题描述
我正在尝试实现一个 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 { }
解决方案
在您的 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){
}
推荐阅读
- xml - 基于文档值分布的 Solr 功能
- flutter - 参数类型“Function”不能分配给参数类型“void Function(bool?)?”
- woocommerce - 如何在 WooCommerce 中根据运输等级包装产品?
- go - 如何从 URL 中检索域?
- r - 如何在R中将两个总和更改为两个for循环?
- c# - 如果表格不在焦点上,有没有办法按一个键使表格出现?
- java - 无法解析符号'StackPane' Intelij IDEA
- java - Spring Boot 2.5.0、Spring Cloud 2020.0.2 和 Hibernate 5.4.31 - H2 数据库多行插入失败
- php - 在 PHP 中使用 CURL 发送文件和参数
- php - 仅为特定的重力形式运行函数