路由到嵌套页面/组件，嵌套出口不起作用

所以我正在使用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 {}

随着网址 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 ，为什么它不能像这样工作？

编辑：

可行的第二种方式，但不适合我：

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 {}