离子标签不加载页面内容答案

【问题标题】：Ionic Tabs not loading content of the page离子标签不加载页面内容
【发布时间】：2021-12-01 05:10:26
【问题描述】：

几天以来，我一直在尝试制作简单的 ionic tab 组件。我有一个屏幕，用户在底部插槽上有 3 个选项卡。单击选项卡时，会为选项卡触发 ngOnInit 函数，但我似乎无法加载与组件关联的 Html。有什么想法可能是错的吗？我在 ngOnInit 方法中放置了一条控制台日志消息，它在控制台中显示了该消息，因此我认为路由配置正确。我还可以看到 URL 发生了变化。

我的 HTML 代码：

                <ion-tab-button tab="journey">
                    <ion-icon name="walk"></ion-icon>
                  <ion-label>Journey</ion-label>
                </ion-tab-button>

              <ion-tab-button tab="learning">
                  <ion-icon name="book"></ion-icon>
                <ion-label>Current Learning</ion-label>
                <ion-badge>6</ion-badge>
              </ion-tab-button>

              <ion-tab-button tab="profile">
                  <ion-icon name="information-circle"></ion-icon>
                  <ion-label>Profile</ion-label>
              </ion-tab-button>
            </ion-tab-bar>
          </ion-tabs> 
 </ion-toolbar>

我尝试过使用离子页面，然后也尝试使用离子组件。两种方法都显示 ngOnInit 触发和 URL 转换的相同行为，但与选项卡关联的 HTML 不会加载。

我的 routing-module.ts 代码

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ChildDetailPage } from './child-detail.page';
import { CurrentLearningPageModule } from '../../current-learning/current-learning.module';
import { CurrentLearningComponent } from '../../current-learning/current-learning.component';
import { ProfileComponent } from '../../profile/profile.component'

const routes: Routes = [
  {
    path: '',
    component: ChildDetailPage,
    children:[
      {
        path: 'journey',
        children:
            [
              {
                path: '',
                loadChildren: './child-detail.page'
              }
            ]
      },
      {
        path: 'learning',
        children:
            [
              {
                path: '',
                //loadChildren: '../../current-learning/current-learning.module#CurrentLearningPageModule'
               // loadChildren: () => import('../../current-learning/current-learning.module').then( m => m.CurrentLearningPageModule)
               component: CurrentLearningComponent
              }
            ]
      },
      {
        path: 'profile',
        loadChildren: () => import('../../profile/profile.component').then( m => m.ProfileComponent)
      },

      // {
      //   path: '',
      //   redirectTo: 'journey',
      //   pathMatch: 'full'
      // }
    ]
  },
  {
    //path: '',
    //redirectTo: 'child/child-detail/',
    //pathMatch: 'full'
  }
];

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

任何帮助将不胜感激！

【问题讨论】：

您能否在单击选项卡后提供更改的路由 url。看来您的子路线应该像“childDetailsPage”一样不在子系统中。
这是我单击标签localhost:8100/child/child-detail/learning 后更改的 URL。标签页 html 没有改变，只有 ngOnInit 被触发。我还检查了其他离子生命周期方法正在触发

标签： ionic-framework angular8 angular-routing

【解决方案1】：

我发现了问题！

问题出在 HTML 代码中。我已将 ion-tab 代码放在 ion-footer 标记中。 ion-tab 代码需要存在于 ion-content 选项卡中。

我将代码放在 ion-footer 中，以便选项卡出现在页脚中。但是要做到这一点，我需要做的就是使用我没有注意到的 ion-tab-bar slot=“bottom”！

【讨论】：

【解决方案2】：

派对迟到了，但对于任何将来遇到此问题的人来说都很重要......

它不应包含在 ion-content 内，否则它将成为内容元素的一部分，并且您会遇到滚动等问题。

您应该将其添加到您的 app.component.html 文件中：

<ion-app>
  <ion-router-outlet></ion-router-outlet>
   <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="my-page-path">
        <ion-icon name="calendar"></ion-icon>
        <ion-label>My Page</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-app>

【讨论】：