Angular 带参数的路由

Question

我正在尝试实现一个编辑按钮，它应该导航到要编辑的页面。我知道应该使用参数化路由，但我不确定相对于这段代码应该如何实现它？有人可以给我一个建议或教程链接，我可以解决我的问题，并且我想稍后在 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

      }

Answer 1

首先你需要在构造函数中注入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 Routing with parameter

angular

typescript

angular2-routing