在Ionic 3中导航时，页面标题重叠

Question

我正在Ionic 3中构建应用程序，我正在使用this.navCtrl.push/pop()函数浏览页面。

但无论何时我push()或pop()，标题都重叠。

附上截图。

有什么建议？

谢谢

这是标题代码片段。

<ion-header>

    <ion-navbar [hideBackButton]="true" padding>
        <h6 class="navbar--title">Select acquisitions</h6>
        <ion-buttons end>
            <button (click)="goBack()" class="navbar--back"><i class="icon-chevron-left"></i></button>
        </ion-buttons>
    </ion-navbar>

</ion-header>

Answer 1

您可以使用NavController生命周期事件来修复重叠，至少我设法做到这一点。在您的情况下，将html更改为：

    <ion-navbar [hideBackButton]="true" padding>
        <h6 class="navbar--title" [hidden]="!showHeader">Select acquisitions</h6>
        <ion-buttons end>
            <button (click)="goBack()" class="navbar--back"><i class="icon-chevron-left"></i></button>
        </ion-buttons>
    </ion-navbar>

接下来要做的是在* .ts文件中实现生命周期事件中的两个函数：

ionWillLeave() {
    this.showHeader = false;
}

ionWillEnter() {
    this.showHeader = true;
}

并且当然showHeader值最初设置为false。