将子组件路由附加到父组件路由

时间:2020-06-08 03:52:22

标签: angular

我是新手。子组件路线看起来像 /practice/NATA/(test:edit/59afb586c99fbb3068fce1f6/courses) 并在同一子组件中单击按钮应将路线更改为/practice/NATA/(test:edit/59afb586c99fbb3068fce1f6/courses/duplicate/<courseid>) 但是我正在像这样的/practice/NATA/(test:edit/59afb586c99fbb3068fce1f6/(courses//test:duplicate/593107b273790c30c4e08b03))

路线

子组件路由模块如下

    imports: [RouterModule.forChild([
    { path: '', component: NewEditPracticeComponent, outlet: 'test', canActivate: [AdminGuard] },
    { path: 'duplicate/:courseid', component: NewEditPracticeComponent, outlet: 'test', canActivate: [AdminGuard] },
]),

[routerLink]="[{ outlets: { test: ['duplicate', item._id ]}}]"

父组件路由模块如下

 [RouterModule.forChild([
{
  path: ':course', component: PracticeComponent, canActivate: [CourseGuard], children: [
    { path: '', component: PracticeListComponent, outlet: 'test', pathMatch: 'full' },
    { path: 'new', loadChildren: './new-edit-practice/new-edit-practice.module#EditPracticeModule', outlet: 'test', canActivate: [AdminGuard] },
    { path: 'edit/:testid', loadChildren: './new-edit-practice/new-edit-practice.module#EditPracticeModule', outlet: 'test', canActivate: [AdminGuard] },
    // { path: 'duplicate/:courseid/:testid', loadChildren: './new-edit-practice/new-edit-practice.module#EditPracticeModule', outlet: 'test', canActivate: [AdminGuard] },

  ]
},
{ path: '', loadChildren: './practice-test/practice-test.module#PracticeTestModule' }
 ])]

,它正在渲染路径edit/:testid。预先感谢。

1 个答案:

答案 0 :(得分:1)

您需要像这样将“ ./”附加到routerlink属性中 [routerLink]="[{ outlets: { test: ['./duplicate', item._id ]}}]"。这将确保路由器将在当前路由器内部查看。 您可以查看更多信息here