在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。