Question

ion-back-button不会出现在ion-menu-button的右侧。为什么会这样？

ion-menu-button和ion-title正确显示并在同一水平位置对齐。

<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检查器中，display的CSS ion-back-button属性设置为none。为什么将其设置为none？

我用过

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

导航到此页面，因此我希望使用后退按钮进行选择。为什么navigateForward没有添加到堆栈中，这会使ion-back-button出现？

Answer 1

如果之前没有要显示的叠加层/页面，则不会显示

因此您可以设置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 2

这是根页面吗？如果这样的话，离子后退按钮将不会显示。

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

Answer 3

如果堆栈中没有页面，则

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

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

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

您需要向here学习

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

Answer 4

解决方法。我以编程方式决定URI路径。缺点是，如果向应用程序添加了更多详细信息页面，则需要添加它们（例如，在一系列后退按钮限定路径中）。

<ion-button *ngIf="router.url.includes('/term/')"><ion-icon name="arrow-back"></ion-icon></ion-button>

将路由器对象添加到该组件的构造函数中

constructor(public router: Router) { }

如果仍然有人想出了为什么程序化导航不添加到导航堆栈的原因-以便后退按钮出现在详细信息页面上-我很乐意听。

Answer 5

只需在scss文件中添加颜色即可显示。

ion-back-button{
  --color: black;
}

也不要忘记指出href，将其添加为html文件

<ion-buttons slot="start">
    <ion-back-button defaultHref="YourRouteHere"></ion-back-button>
</ion-buttons>

Answer 6

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

Answer 7

因此 Ionic 开发人员使事情变得复杂，现在 (Ionic5) 属性被称为 default-href 而不是 defaultHref。

但是点击时仍然没有加载到href。

为什么没有显示离子后退按钮？

7 个答案: