ionic-framework - Ionic 2/3/4 自定义返回按钮

Question

我想更改导航栏后退按钮中使用的 ionic 图标，该按钮在页面被插入导航堆栈时出现。这是我的代码:

<ion-header>
   <ion-navbar>
      <button ion-button icon-only menuToggle>
        <ion-icon [name]="navbarIcon"></ion-icon>
      </button>
    <ion-title>Title</ion-title>
  </ion-navbar>
</ion-header>

“name”指令影响菜单切换按钮的外观，但对后退按钮没有影响。有没有办法修改我的代码，以便我可以更改后退按钮中显示的图标？

我看了this question ，但它适用于 Ionic 1，我也认为应该有更好的方法。

Answer 1

我可以通过隐藏默认的后退按钮并添加自定义按钮来做到这一点。

在我需要自定义后退按钮的页面中，只需设置标题如下

<ion-header>
  <ion-navbar hideBackButton="true">
    <ion-title>Details</ion-title>
    <ion-buttons left>
        <button ion-button navPop icon-only>
      <ion-icon name="exit"></ion-icon>     
    </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

Stackblitz 链接与工作演示:https://stackblitz.com/edit/ionic-jihfrp