ion-back-button 没有显示在 Ionic 5 的工具栏中

Question

我试图在一页的工具栏中显示后退按钮。下面是我的代码的摘录。

  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button [text]="" [icon]="arrow-back"> </ion-back-button>
    </ion-buttons>
    <ion-title>
      About
    </ion-title>
  </ion-toolbar>

如果我设置该 defaultHref属性，它会起作用，但我将无法使用带有text和icon 的自定义后退按钮。

  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="home"> </ion-back-button>
    </ion-buttons>
    <ion-title>
      About
    </ion-title>
  </ion-toolbar>

我该如何让它发挥作用。有人可以帮忙吗？

Answer 1

如果您尝试使用自定义标头（像我一样），我发现这是很容易实现并且按预期工作的解决方法。

/components/custom-header.html

<ion-toolbar>
  <ion-buttons slot="start">
    <ng-content></ng-content>
  </ion-buttons>
  <ion-title>Page title</ion-title>
</ion-toolbar>

用法如下：

/pages/home-page.html

<ion-header>
    <custom-header>
       <ion-back-button></ion-back-button>
    </custom-header>
</ion-header>