时间戳

首页 > 解决方案 > 离子标签不加载页面内容

ionic-framework - 离子标签不加载页面内容

问题描述

几天以来，我一直在尝试制作简单的 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 {}

任何帮助将不胜感激！

标签： ionic-frameworkangular8angular-routing

解决方案

派对迟到了，但对于任何在未来偶然发现这件事的人来说都很重要......

它不应该进入，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>

推荐阅读