Ionic 4 组件未在导航上呈现

Question

我正在使用 Ionic 4 和 Angular 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>

TS 文件中的 routesTo('messages') 和 routesTo('forum')。

routeTo(route: string){
    this.navCtrl.navigateForward(`sharing/${route}`);
  }

我在 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
        }]
}])

Answer 1

您不会尝试访问通过延迟加载加载的组件吗？因为当您刷新页面时，它们会很好地加载。

尝试更改：

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

收件人：

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

并检查包含这些组件的当前模块的路由

例子：

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'messages',
        children: [
          {
            path: '',
            loadChildren: '../messages/messages.module#MessagesModule'
          }
        ]
      }
    ]
  }
];

• 注意：如果从 Ionic 3 迁移，请注意一些熟悉的 Ionic 导航元素在版本 4 中已被弃用。虽然它们有效，但不建议使用 NavController 或 ion-nav。

使用角路由器代替：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({ ... })
export class HomePage {
  constructor(private router: Router) {}

  routeTo(route: string){
    this.router.navigateByUrl(`sharing/${route}`);
    this.navCtrl.navigateForward(`sharing/${route}`);
  }
}

• 链接参考：Ionic 4 Routing and Navigation Guide

最好的问候。

Answer 2

我找到了解决方案。这个答案是为那些面临同样问题的人准备的。 只需在每个标记页面或单独的 HTML 中添加“ion-content”。 例如，表单 component ABC 和 component XYZ 将所有标记保留在 ion-content 中。

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

有关 Ionic 4 中选项卡的其他详细信息：

Ionic 4 对选项卡进行了一些更改，从而改变了多年来的工作方式。 现在您可以将选项卡用作按钮（它们不会仅仅因为它们是选项卡而强行路由您的应用程序） 我已经从选项卡中删除了选项卡属性（这是 Ionic 正式提供的功能）。 它将如何提供帮助？您将了解何时路由延迟加载的路由或food 和non-food 不是单独的页面但它们只是过滤home page 上的一些内容的场景，这些内容具有所有逻辑。

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

现在上面只是看起来像标签的按钮。 通过使用它们，您不必担心同名路由。只需单击选项卡即可路由到不同的组件。