Question

我正在尝试实现一个编辑按钮，该按钮应导航到要编辑的页面。我知道应该使用参数化的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

      }

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中，您可以使用id类从路由参数中读取经过编辑的ActivatedRoute

带参数的角路由

1 个答案: