离子标签导航栏出现在子页面中的原因

Question

这是我的选项卡导航栏，这也在我的其他子页面上重叠

<ion-header>
  <ion-navbar hideBackButton="true">
    <span class="hdr-clr">Winkrr</span>
    <ion-buttons start>
      <button ion-button icon-only>
        <ion-icon style="color:#ed145b;" name="ios-search"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon style="color:#ed145b;" name="ios-notifications-outline"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon style="color:#ed145b;" name="ios-contact-outline"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-tabs tabsPlacement="top" tabsHideOnSubPages="true" primary>
  <ion-tab tabIcon="md-globe" [root]="tab1Root"></ion-tab>
  <ion-tab tabIcon="stats" [root]="tab2Root"></ion-tab>
</ion-tabs>

这是我的子页面导航栏

<ion-header>
  <ion-navbar hide-tabs>
    <ion-title>personal-chat</ion-title>
  </ion-navbar>
</ion-header>

这就是我的导航方式

  onContact(){
    this.navCtrl.push(PersonalChatPage);
  }

我已经在离子 2 中使用了单页的选项卡。我使用了选项卡页面的离子导航栏，这对于两个选项卡很常见。 但相同的导航栏出现在子页面上

Answer 1

您可以尝试在app.module.ts中设置配置，如下所示：

 imports: [
        IonicModule.forRoot(MyApp, {
            // Tabs config
            tabsHideOnSubPages: true,
            ...
        })
    ]