在Angular 9中,可以通过使用route的pathMatch
属性和正则表达式来实现在路由中允许带有可选参数值的尾部斜杠。下面是一个示例:
首先,在路由模块中定义路由:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyComponent } from './my.component';
const routes: Routes = [
{
path: 'my-component/:id',
component: MyComponent,
pathMatch: 'prefix',
children: [
{
path: '',
component: MyComponent,
pathMatch: 'full'
}
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
然后,在组件中获取参数值:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-my-component',
template: `
My Component
id: {{ id }}
`
})
export class MyComponent implements OnInit {
id: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.id = params['id'];
});
}
}
在上面的示例中,我们定义了一个带有可选参数的路由my-component/:id
。使用pathMatch: 'prefix'
属性,路由将匹配带有或不带有尾部斜杠的URL。在组件中,我们通过ActivatedRoute
服务来获取参数值,并在模板中显示出来。
这样,当访问my-component/123
时,id
参数值将为123
,而当访问my-component/123/
时,id
参数值也将为123
。