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

【问题标题】：angular 10 routing & navigation error with parameter带参数的角度 10 路由和导航错误
【发布时间】：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】：

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} 你能解释一下什么是“路由”