Маршрутизация на вложенную страницу / компонент с неработающей вложенной розеткой

Question

Поэтому я использую шаблон Ionic Tabs (Ionic 4), и у меня действительно возникают проблемы с маршрутизацией.

В основном у меня есть вкладка info.Это приводит к InfoPage.На этой странице у меня есть список элементов, и когда я нажимаю на элемент, я хочу перейти на одну страницу глубже на страницу item-info, используя информационный выход.

Так что я полагаю, что мне нужно настроитьМаршрут внутри моего info.module.ts.Выглядит это так:

const routes: Routes = [
  {
    path: '',
    component: InfoPage,
    pathMatch: 'full'
  },
  {
    path: 'item',
    component: ItemInfoPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    ItemInfoPageModule
  ],
  declarations: [InfoPage, ]
})
export class InfoPageModule {}

С помощью URL http://localhost:8101/tabs/(info:info) я попадаю на страницу с информацией и думаю, что с помощью http://localhost:8101/tabs/(info:info)/item я перехожу на страницу с информацией об элементе.Однако я просто перенаправлен обратно на http://localhost:8101/tabs/(info:info).

Это мой tabs.router.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'info',
        outlet: 'info',
        component: InfoPage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

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

А вот мой tabs.module.ts

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    TabsPageRoutingModule,
    HomePageModule,
    AboutPageModule,
    ContactPageModule,
    InfoPageModule,
    ItemInfoPageModule
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

Также здесьДругой вопрос: почему я должен использовать маршрут tabs/(info:info) и почему tabs/info не работает?Я указал путь info, так почему же он не работает так?

РЕДАКТИРОВАТЬ:

2-й способ, который может работать, но не для меня:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full',
      },
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'info',
        outlet: 'info',
        component: InfoPage,
        children: [
          { path: 'item', outlet: 'info', component: ItemInfoPage}
        ]
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

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

Answer 1

Каждый детский маршрут должен быть размещен под детской собственностью.В вашем случае вы объявили, что маршрут для информационной страницы /tabs/info, а когда вы пытаетесь получить доступ к пути /tabs/yourVariable/info, вы перенаправлены, потому что такой путь не существует.И tabs/info - это статический путь, а /tabs/:info - это динамический путь.Разница в том, что секунда находится не в информационном URL, а в, например, /tabs/iaminsanevariable, где параметр маршрутизатора info = iaminsanevariable.

const routes: Routes = [
  {
    path: 'tabs',     
    children: [
      {
        path: ':home',
        component: TabsPage,
        children: [
         { path: 'info',
           outlet: 'info',
           component: InfoPage }
        ]
      },
      ...
    ]
  }
 ...
];