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>

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

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

我在 LandingPageModule 中有一个登录页面，从那里我直接路由到 'sharing/home'，这是 'sharing'

的子路由

有关更多信息，我有基本路由模块：

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 中已被弃用。虽然它们可以工作，但不建议我t 使用 NavController 或 ion-nav。

改用 angular 路由器：

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}`);
  }
}

Link参考：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>

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

Ionic 4 组件未在导航中呈现

Ionic 4 component is not rendering on navigation

ionic-framework

ionic4

angular8

ionic-tabs