时间戳

首页 > 解决方案 > 带参数的角度 10 路由和导航错误

angular - 带参数的角度 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()

我收到此错误 错误：未捕获（承诺）：错误：无法匹配任何路由。 URL段：当我使用routerLink时带有参数的'exam-panel'工作正常，但点击事件无法与router.navigate一起使用

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

标签： angularangular-routingangular10

解决方案

根据文档https://angular.io/docs/ts/latest/api/router/index/Router-class.html中提到的，您可以使用

导航网址：

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

或使用导航：

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

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

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

推荐阅读