Дочерние маршруты не обнаружены в Angular

Question

Я работаю над приложением ioni c (Ioni c 5), и мне кажется, что я не могу заставить маршруты работать правильно. Вот маршруты моего приложения.

Но, похоже, я не могу заставить этот URL работать / state / test-центры

Angular не находит этот маршрут .. Вот след

Я просто пробовал это .. Я тоже пробовал с этим .. Сделал тоже не работает ..

{
    path: "state",
    component: StateComponent,
    pathMatch: "full",
    children: [
      { path: "test-centers", component: TestCentersComponent, pathMatch: "full" }
    ]
  }

Answer 1

Протестированный сценарий:

{
    path: 'state',
    component: StateComponent,
    children: [
      {
        path: 'centers',
        pathMatch: 'full',
        component: TestCentersComponent,
      },
    ],
},

Кроме того, вам необходимо добавить это к вашему StateComponent:

<router-outlet></router-outlet>

Небольшие изменения в вашем маршруте. Я думаю, что pathMatch: 'full' не требуется, потому что он соответствует целому маршруту, но вы добавляете /test-centers, который не соответствует.

Кроме того, если вы не планируете добавлять больше дочерних элементов первого уровня, то я думаю, что дочерний элемент второго уровня можно переместить на первый уровень, так как вы добавляете только path: '', что мало что делает.

Answer 2

Если вы хотите, чтобы содержимое TestCentersComponent отображалось как дочерний элемент StateComponent, включите <router-outlet> в шаблон StateComponent и используйте следующее определение маршрута. Вы можете получить к нему доступ с помощью url /state/test-centers, и вы увидите, что родительский компонент отображается вместе с шаблоном дочернего компонента вместо розетки.

{
  path: 'state',
  component: StateComponent,
  children: [
    { path: 'test-centers', component: TestCentersComponent },
  ]
}

Другой способ - с третьим компонентом, StateContainerComponent, выступая в качестве заполнителя контейнера / страницы / макета, в котором нет ничего, кроме <router-outlet>. Этот подход будет отображать либо StateComponent, либо TestCentersComponent, но не то и другое как рендеринг родитель-потомок, как в предыдущем методе. К нему также можно получить доступ с помощью URL /state/test-centers.

{
  path: 'state',
  component: StateContainerComponent,
  children: [
    { path: 'test-centers', component: TestCentersComponent },
    { path: '', component: StateComponent },
  ]
}

. Здесь приведена демонстрация stackblitz , демонстрирующая оба подхода, при этом для последнего я использовал маршрут state-container только для демонстрационные цели.

Answer 3

вам не нужна стратегия pathMatch, ваш маршрут должен быть таким

{
  path: "state",
  component: StateComponent,
   children: [
   path: "",
   component: StateComponent,
    children: [
     {path: "test-centers" , component:TestCentersComponent}
   ]
 ] 
}