页面在 Ionic4 中的导航重叠

Question

我使用 ionic4 开发了一个应用程序。我在导航过程中遇到问题，页面重叠如下图所示。我正在使用 NavController 进行导航。

    public editUserProfile() {
       this.menuCtrl.close('side-menu');
       this.navCtrl.navigateForward('/home/edit-profile');
  }

有什么解决办法吗？

Answer 1

Ionic 3 导航方法在 Ionic 4 中不起作用。您需要在此处实施 angular 路由概念。裁判这个linkhttps://ionicframework.com/docs/navigation/angular

Answer 2

我找到了问题的解决方案，这不是因为使用 NavController 的导航，在我的例子中，我使用的是没有颜色的 ion-header。这引起了问题。像下面这样使用

<ion-header color="<set your color>"></ion-header>

遇到这种情况的朋友，请检查一下背景是否设置好或者是透明的。

Answer 3

路由到其他页面时内容重叠可能是由于默认路由动画。

尝试在 ion-router-outlet 中将“动画”属性禁用为 false。

<ion-router-outlet [animated]="false" id="main"></ion-router-outlet>

Pages overlaps on navigation in Ionic4