带参数的角度 10 路由和导航错误

Posted 2023-02-22

【中文标题】带参数的角度 10 路由和导航错误

【英文标题】：angular 10 routing & navigation error with parameter

【发布时间】：2020-12-30 13:45:03

【问题描述】：

路由数组

const routes: Routes = [
 ...
  path:'exam-list',component: ExamListComponent,
    path:'exam-panel/:Id',component: ExamPanelComponent
..
];

数组导入

@NgModule(
  imports: [RouterModule.forRoot(routes)],

点击事件

onSelect(examdetails)

this.router.navigate(['exam-panel',examdetails.Id])

点击事件 onselect()

我收到了这个错误 错误：未捕获（承诺中）：错误：无法匹配任何路由。 URL 段：'exam-panel' 带参数 当我使用 routerLink 时，它可以正常工作，但是单击事件无法与 router.navigate 一起使用

当我使用 [routerLink]="['/exam-panel/',examdetails.Id]" 时，它正在工作，但是当我使用 "router.navigate" 时，它使用参数导航第一个路由考试面板好的，然后自动路由到首页

【参考方案1】：

如 doc https://angular.io/docs/ts/latest/api/router/index/Router-class.html 中所述，您可以使用任一

navigateByUrl：

router.navigateByUrl(`/exam-panel/$examdetails.Id`);

或使用导航：

router.navigate(['/exam-panel', examdetails.Id], relativeTo: route);

相对于调用请求导航到相对于当前 URL 的动态路由路径。

请记住我们经常忘记/ 这是一条相对路径。路由器。 navigate 需要一个 relativeTo 参数来进行相对导航

【讨论】：

router.navigateByUrl(/exam-panel/$examdetails.Id) ？你的examdetails.Id是什么来的？你控制台记录了吗？

examdetails 是一个来自 API HTTP 请求的 json 数组

当我使用 [routerLink]="['/exam-panel/',examdetails.Id]" 时它正在工作，但是当我使用 "router.navigate" 时它会导航第一条路线考试面板参数确定，然后自动路由到主页

router.navigate(['/exam-panel',examdetails.Id], relativeTo: route);您是否尝试在考试面板之前在 router.navgate 中添加“/”？

relativeTo: route 你能解释一下什么是“路由”