Блог

Я хочу переходить с одной страницы на другую, от одного компонента к другому:

 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 работает, но в этом случае ссылка не является дочерней ссылкой.

То, как вы реализовали вложенный маршрут, angular ищет a <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"
        }
      ]
    }
  ];