在Angular中,如果我们要为应用程序的某些部分添加路由前缀,同时又需要在该前缀中使用路由参数,该如何处理呢?
我们可以使用Angular的路由器来实现这一目标。在路由器配置中,我们可以设置路由前缀和路由参数,并将它们传递给各自的组件。
以下是一个示例代码:
app.routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes, } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { EditComponent } from './edit/edit.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: ':id/edit', component: EditComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
edit.component.ts:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-edit',
template: `Editing item {{ id }}...`
})
export class EditComponent implements OnInit {
public id: any;
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit(): void {
this.activatedRoute.params.subscribe(params => {
this.id = params['id'];
});
}
}
在上面的代码中,我们定义了两个路由:一个是默认的主页路径,另一个是包含路由参数的编辑路径。在编辑组件中,我们使用路由服务来获取路由参数,并将其显示在页面上。
我们可以像这样在浏览器中访问编辑路径:http://localhost:4200/1/edit,其中“1”是我们要编辑的项目的ID。路由器会匹配路径并渲染EditComponent,并将ID传递给其构造函数。该组件接着使用路由服务来获取和显示ID。
这就是如何在Angular应用程序中使用路由前缀和路由参数