Пользовательская кнопка возврата Ionic 2/3/4

Я хотел бы изменить значок ion, используемый в кнопке возврата на панели навигации, которая появляется, когда страница помещается в стек навигации. Вот мой код:

<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 влияет на внешний вид кнопки переключения меню, но не влияет на кнопку возврата. Есть ли способ изменить мой код, чтобы я мог изменить значок, отображаемый на кнопке возврата?

Я просмотрел этот вопрос, но он предназначен для Ionic 1 и я также думаю, что должен быть способ получше.


ionic-framework ionic3
person Neil    schedule 04.09.2018    source источник
comment
Изменить: я нашел другой способ решить свою проблему, но мне все равно хотелось бы внести свой вклад в это.   -  person Neil    schedule 05.09.2018

Ответы (1)


arrow_upward
2
arrow_downward

Я смог сделать это, скрыв кнопку возврата по умолчанию и добавив собственную.

На странице, где мне нужна настраиваемая кнопка возврата, просто установите заголовок, как показано ниже.

<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

person RamY    schedule 05.09.2018