Angular 8 - child routerLink 不工作

Question

我想从一个页面导航到另一个页面，从一个组件导航到另一个组件：

const routes: Routes = [
  {
    path: '',
    component: UploadPageComponent,
    children: [
      {
        path: 'frameworks',
        component: FrameworksSceneComponent,
        pathMatch: 'full',
        children: [
          {//doesn't work
            path: 'questionnaire',
            component: QuestionnaireComponent,
          },
        ],
      },
      {
        path: 'documents',
        component: DocumentsSceneComponent,
        pathMatch: 'full',
      },
      {//works
        path: 'questionnaire',
        component: QuestionnaireComponent,
        pathMatch: 'full',
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class UploadRoutingModule {
}

我的模板（FrameworksSceneComponent）：

 <a [routerLink]="['questionnaire']">aaaaaaaaaaaaaaaaaaaa</a>

但这有效（FrameworksSceneComponent）：

<a [routerLink]="['/private/upload/questionnaire']">bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a>

我的嵌套 link 有什么问题？为什么点击 aaaaaaaaaaaaaaaaaa 后我被重定向到我的主页。另一方面 link bbbbbbbbbbbbbbbb 有效，但在这种情况下 link 不是 child link.

Answer 1

您实现嵌套路由的方式，angular 在您的 FrameworksSceneComponent.html 中寻找 <router-outlet>。尝试像下面这样实现。不确定为什么它导航到主页。

  routes: Routes = [
    {
      path: "",
      children: [
        {
          path: "",
          component: UploadPageComponent
        },
        {
          path: "frameworks",
          children: [
            {
              path: "",
              component: FrameworksSceneComponent,
              pathMatch: "full"
            },
            {
              //should  work
              path: "questionnaire",
              component: QuestionnaireComponent
            }
          ]
        },
        {
          path: "documents",
          component: DocumentsSceneComponent,
          pathMatch: "full"
        },
        {
          //works
          path: "questionnaire",
          component: QuestionnaireComponent,
          pathMatch: "full"
        }
      ]
    }
  ];