Ionic framework 离子4组件未在导航上渲染

我用的是离子4和角8 我的应用程序底部有以下选项卡，我想通过单击选项卡从论坛和消息导航到与选项卡关联的不同组件。 但问题是页面不呈现在点击标签，但如果我刷新我的页面，然后导航工作良好。 我不知道我错过了什么

标签HTML

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button selected tab="food" (pointerup)="changeItems('food')">
      <ion-icon name="pizza"></ion-icon>
      <ion-label>Food</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="non-food" (pointerup)="changeItems('non-food')">
      <ion-icon name="basket"></ion-icon>
      <ion-label>Non-Food</ion-label>
    </ion-tab-button>
    <ion-tab-button class="add-circle" tab="createListing" (pointerup)="routeTo('createListing')">
      <ion-icon name="add-circle"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="forum" (pointerup)="routeTo('forum')">
      <ion-icon name="folder"></ion-icon>
      <ion-label>Forum</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="messages" (pointerup)="routeTo('messages')">
      <ion-icon name="chatboxes"></ion-icon>
      <ion-label>Messages</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

我在LandingPageModule中有一个登录页面，从该页面我直接路由到“共享/主页”，这是“共享”的子路由

有关更多信息，我将基本路线模块设置为：

const routes: Routes = [
  { path: '', redirectTo: 'landing', pathMatch: 'full' },
  { path: 'landing', loadChildren: () => import('./landing/landing.module').then(mod=> mod.LandingPageModule) },
  { path: 'sharing', loadChildren: () => import('./sharing/sharing.module').then(mod=> mod.SharingModule)  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

共享模块的路由如下所示：

RouterModule.forChild([
      {
        path: '',
        component: ShareLayoutComponent,
        children:[{
          path: 'home',
          component: HomeComponent
        },
        {
          path: 'forum',
          component: ForumComponent
        },
        {
          path: 'messages',
          component: MessageComponent
        }]
}])

---

您是否会尝试访问通过延迟加载加载的组件？因为当你刷新页面时，它们的加载效果很好

尝试从以下位置更改：

<ion-tab-button tab="messages" (pointerup)="routeTo('messages')">
   <ion-icon name="chatboxes"></ion-icon>
   <ion-label>Messages</ion-label>
</ion-tab-button>

• 注意：如果从Ionic 3迁移，请注意一些熟悉的Ionic导航元素在版本4中已被弃用。当它们工作时，不建议it使用导航控制器或离子导航。

改用角度路由器：

从'@angular/core'导入{Component}；
从'@angular/Router'导入{Router}；
@组件（{…}）
导出类主页{
构造函数（专用路由器：路由器）{}
路由到（路由：字符串）{
this.router.navigateByUrl（`sharing/${route}`）；
this.navCtrl.navigateForward（`sharing/${route}`）；
}
}

• 链接参考：

---

致以最诚挚的问候。

我找到了解决办法。这个答案适用于那些面临同样问题的人。 只需在每个标记页面或分离的HTML中添加“离子内容”。 e、 例如，表单

组件ABC

和

组件XYZ

将所有标记保留在内容中

<ion-content
  <!--Your HTML goes here-->
</ion-content>

上面的按钮看起来就像标签。

---

通过使用它们，您不必担心同名路由。只需单击选项卡即可路由到不同的组件。

爱奥尼亚3和爱奥尼亚4中的NavController与爱奥尼亚4中的NavController不同，因为它在下面使用Angular自己的路由

this.navCtrl.push（'sharing'）

和

this.router.navigateByUrl（'sharing'）

有很多不同。Ionic 4 navController与Angular一样，隐式地提供向前和向后动画，但我知道您将开始使用Angular Router，因为它在其官方文档中是推荐的。是吗？；）这意味着，现在您可以使用本机功能定义路径，而不是在应用程序中推/弹出。我还添加了路由。请喝一杯look@AbhishekChokra如果父路径为空，为什么要引用根“共享”？尝试一下：“this.navCtrl.navigateForward（route）；”当我从登录路由到

共享/home

时，它做得非常好。如果我尝试

this.navClt.navigateForward（route）

从路由到

localhost:8080/messages

的选项卡，该选项卡不应作为有效url为“localhost:8080/sharing/messages”

<ion-tab-button tab="messages">
   <ion-icon name="chatboxes"></ion-icon>
   <ion-label>Messages</ion-label>
</ion-tab-button>

<ion-content
  <!--Your HTML goes here-->
</ion-content>

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button selected (pointerup)="changeItems('food')">
      <ion-icon name="pizza"></ion-icon>
      <ion-label>Food</ion-label>
    </ion-tab-button>
    <ion-tab-button (pointerup)="changeItems('non-food')">
      <ion-icon name="basket"></ion-icon>
      <ion-label>Non-Food</ion-label>
    </ion-tab-button>
    <ion-tab-button class="add-circle" (pointerup)="routeTo('createListing')">
      <ion-icon name="add-circle"></ion-icon>
    </ion-tab-button>
    <ion-tab-button (pointerup)="routeTo('forum')">
      <ion-icon name="folder"></ion-icon>
      <ion-label>Forum</ion-label>
    </ion-tab-button>
    <ion-tab-button (pointerup)="routeTo('messages')">
      <ion-icon name="chatboxes"></ion-icon>
      <ion-label>Messages</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>