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

问题描述

路由数组

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（）

我收到此错误 错误：未捕获（承诺）：错误：无法匹配任何路线。网址段：“检查面板” 带参数 当我使用routerLink时，它工作正常，但是在click事件上不能与router.navigate一起使用

当我使用[routerLink] =“ ['/ exam-panel /'，examdetails.Id]”时，它可以正常工作，但是当我使用“ router.navigate”时，它可以通过带有参数的第一个路线检查面板进行导航确定，然后自动转到首页

解决方法

根据文档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的动态路由路径。

请记住，我们经常忘记/这是一条相对路线。路由器。导航需要相对导航参数