带参数的角路由

【问题标题】：Angular Routing with parameter带参数的角路由
【发布时间】：2019-04-30 16:42:28
【问题描述】：

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

      }

【问题讨论】：

标签： angular typescript angular2-routing

【解决方案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 类从路由参数中读取编辑后的id

【讨论】：