Angular 带参数的路由
Angular Routing with parameter
我正在尝试实现一个编辑按钮,它应该导航到要编辑的页面。
我知道应该使用参数化路由,但我不确定相对于这段代码应该如何实现它?
有人可以给我一个建议或教程链接,我可以解决我的问题,并且我想稍后在 Angular 中更深入地了解路由。
我确实阅读了有关路由的 Angular 文档,但对我帮助不大。
export interface FileModel {
Id?: Array<string>;
dbList?: Array<string>;
name?: string;
}
export interface File {
fileId?: number;
name?: string;
dbList?: string;
}
public editFile: FileModel = {};
edit(file: File){
this.editFile.dbList = file.dbList.split(',');
this.editFile.name = file.name;
// navigate and send
}
首先你需要在构造函数中注入Router
:
constructor(private router: Router) {}
然后在您要导航的代码中执行如下操作:
this.router.navigate([`/navigateUrlPart/${file.id}`]);
当然,您应该在您的 AppRoutingModule
中创建路由以使其协同工作
const routes: Routes = [
...
{ navigateUrlPart/:id', component: YourEditComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes})],
exports: [RouterModule]
})
export class AppRoutingModule { }
并且在 YourEditComponent
中,您可以使用 ActivatedRoute
class
从路由参数中读取已编辑的 id
我正在尝试实现一个编辑按钮,它应该导航到要编辑的页面。 我知道应该使用参数化路由,但我不确定相对于这段代码应该如何实现它? 有人可以给我一个建议或教程链接,我可以解决我的问题,并且我想稍后在 Angular 中更深入地了解路由。 我确实阅读了有关路由的 Angular 文档,但对我帮助不大。
export interface FileModel {
Id?: Array<string>;
dbList?: Array<string>;
name?: string;
}
export interface File {
fileId?: number;
name?: string;
dbList?: string;
}
public editFile: FileModel = {};
edit(file: File){
this.editFile.dbList = file.dbList.split(',');
this.editFile.name = file.name;
// navigate and send
}
首先你需要在构造函数中注入Router
:
constructor(private router: Router) {}
然后在您要导航的代码中执行如下操作:
this.router.navigate([`/navigateUrlPart/${file.id}`]);
当然,您应该在您的 AppRoutingModule
中创建路由以使其协同工作
const routes: Routes = [
...
{ navigateUrlPart/:id', component: YourEditComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes})],
exports: [RouterModule]
})
export class AppRoutingModule { }
并且在 YourEditComponent
中,您可以使用 ActivatedRoute
class
id