为什么没有显示离子返回按钮？

Question

在ion-back-button不现身的右边ion-menu-button。这是为什么？

在ion-menu-button和ion-title显示正确，并在相同的位置horizantal对齐。

<ion-header>
  <ion-toolbar>

    <ion-buttons slot="start">
      <!-- navigation button-->
      <ion-menu-button></ion-menu-button>
      <!-- optional back button-->
      <ion-back-button></ion-back-button> 
    </ion-buttons>

    <ion-title>
        {{ pageTitle | translate}}
    </ion-title>

  </ion-toolbar>
</ion-header>

在 DOM 检查器中， 的 CSSdisplay属性ion-back-button设置为none。为什么它会设置为none？

我用了

this.navCtrl.navigateForward('/term/' + term);

导航到此页面，因此我希望后退按钮可以选择它。为什么navigateForward不添加到堆栈中，这会使ion-back-button显示？

Answer 1

如果 Stack 中没有页面，则

<ion-back-button></ion-back-button>

不会显示。如果要显示，则需要在“defaultHref”属性中添加特定页面。

<ion-back-button defaultHref="logout"></ion-back-button>

你需要从这里学习

https://ionicframework.com/docs/api/back-button

Answer 2

如果没有以前的覆盖/页面显示，它将不可见

所以你可以设置css

ion-back-button {
   display: block;
}

然后click在元素上添加事件

<ion-back-button (click)="close()">
    <ion-icon name="close"></ion-icon>
</ion-back-button>

添加.ts文件

click() {
  this.modalCtrl.dismiss();
}

Answer 3

对于遇到此问题并且ion-back-button仍未出现的任何人，请检查您是否已将其IonicModule导入到页面的模块中。我碰巧为 创build了一个组件，但ion-header并ion-back-button没有出现。这是因为我的ComponentsModule （声明和导出我所有组件的组件）只有导入的而不是. 因此，请务必检查导入中的 。否则后退按钮不会出现CommonsModuleIonicModuleIonicModule

Answer 4

是根页面吗？如果是这样，ion-back-button 将不会显示。

尝试添加属性defaultHref。例如：<ion-back-button defaultHref="home"></ion-back-button>。无论没有导航堆栈，它都应该显示。