angular - Angular 8 - 子路由器链接不起作用

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>

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

标签： angularroutesangular-ui-routerrouterlink

Answer 1

你实现嵌套路由的方式，<router-outlet>在你的FrameworksSceneComponent.html. 尝试如下实施。不知道为什么它导航到主页。

  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"
        }
      ]
    }
  ];