Как исправить компонент, который не загружается в Angular Ionic

Я пытаюсь лениво загрузить компонент в ionic Angular, и у меня есть маршрут (../app/buildings/:buildingId), чтобы не выдавать ошибки при переходе к нему, но он не загружает нужный компонент.

Я думаю, что это по умолчанию для родителя, но я не знаю, как это исправить. Я пробовал некоторые вещи (не ленивая загрузка / размещение всего этого в app.module), но я не могу это исправить. Любая помощь приветствуется.

вкладки.маршрутизатор.модуль.тс

 {
    path: 'app',
    component: TabsPage,
    children: [
      {
        path: 'home',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'buildings',
        children: [
          {
            path: '',
            component: Tab2Page,
            resolve: {buildings: BuildingResolverService},
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab3',
        ...

tab2.module.ts

export const tab2Routes: Routes = [
  {
    path: ':buildingId',
    component: BuildingComponent
  }
];
@NgModule({
  exports: [RouterModule],
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild(tab2Routes)
  ],
  declarations: [
    BuildingComponent
  ]
})
export class Tab2PageModule {}


Переход к /buildings загружает нужный компонент, /buildings/1 — нет. Я ожидаю, что второй маршрут сделает то же самое, я думаю, что он по умолчанию соответствует первому, потому что, может быть, он тоже совпадает? я не уверен, как это исправить, если это так.

Я надеюсь, что я был достаточно ясен

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
3
0
549
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Lazyload в Ionic мало чем отличается от стандартного проекта Angular. Ленивая загрузка автоматически настраивается системой ionic page. Дополнительную информацию можно найти здесь.

Ответ принят как подходящий

Ваш tab2Routes должен иметь маршрут '' по умолчанию Tab2Component и :buildingId как BuildingComponent (как у вас уже есть):

export const tab2Routes: Routes = [
  { 
    path: '', 
    component: Tab2Page 
  },
  {
    path: ':buildingId',
    component: BuildingComponent
  }
];

Другие вопросы по теме