Question

我想更改导航栏的“后退”按钮中使用的离子图标，该按钮在将页面推入导航堆栈时显示。这是我的代码：

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

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

我看着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

离子2/3/4自定义后退按钮

1 个答案: