Ionic 4：带路由的选项卡不显示内容

Question

我正在使用本教程 https://alligator.io/ionic/ionic-4-tabs/ 为我的 Ionic Tabs 创建路由，但不幸的是显示的内容总是隐藏而无法显示。

我的 home.page.html 看起来像这样：

<ion-header>
  <ion-tabs style="display: contents;">

  <ion-tab-bar slot="top">

    <ion-tab-button tab="popular">
      <ion-label>SOme text</ion-label>
      <ion-icon name="heart"></ion-icon>
      <ion-badge>6</ion-badge>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>
</ion-header>

我在家里定义了路由-routing.module.ts:

const routes: Routes = [
    {
        path: 'tabs',
        component: HomePage,
        children:
            [
                {
                    path: 'popular',
                    children:
                        [
                            {
                                path: '',
                                loadChildren: '../popular/popular.module#PopularPageModule'
                            }
                        ]
                }
           ]
     }
]

我的 popular.page.module.html 看起来像这样：

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
<h1>Hallo</h1>
</ion-content>

我期待 h1-Tag "Hallo"，但遗憾的是它没有显示任何内容。确实有趣的是，h1-Tag 显示在浏览器的开发人员工具中。

有什么想法吗？

Answer 1

这让我很头疼XD。你不应该把你的标签放在你的 header 中。点击 component/element 是在页面上方的级别生成的，而 header 元素是在页面内生成的，因此将标签粘贴在 header 中会导致各种疯狂。

我完成了教程并使其正确显示

home.page.html -

<ion-tabs>
<ion-tab-bar slot="top" color="primary">
    <ion-tab-button tab="tab1">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

<ion-tab-button tab="tab2">
      <ion-label>SOme text</ion-label>
      <ion-icon name="heart"></ion-icon>
      <ion-badge>6</ion-badge>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

请评论您希望我添加的内容

Ionic 4：带路由的选项卡不显示内容

Ionic 4: Tabs with routing doesn't display content

ionic-framework

ionic4