在Ionic 5的工具栏中未显示离子返回按钮

kr98yfug  于 2022-12-16  发布在  Ionic
关注(0)|答案(5)|浏览(176)

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

<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属性,它可以工作,但我将无法使用带有 texticon 的自定义后退按钮。

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

我该怎么做。有人能帮忙吗?

nwsw7zdq

nwsw7zdq1#

如果您尝试使用自定义头文件(像我一样),这是我发现非常容易实现的变通方法,并且工作起来就像它应该做的那样。
/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>
falq053o

falq053o2#

这是我的项目

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button text=""></ion-back-button>
    </ion-buttons>
    <ion-title>About</ion-title>
  </ion-toolbar>
</ion-header>
fnx2tebb

fnx2tebb3#

github页面上有一个未决问题,即ion-back-button不会在非ion-header容器(如自定义组件)中显示,不过,你可以用css解决这个问题。

.can-go-back ion-back-button {
    display: block;
}

GitHub问题自2019年起开放:https://github.com/ionic-team/ionic-framework/issues/17039

gkl3eglg

gkl3eglg4#

我有同样的问题,因为你的,我已经设法删除<ion-back-button>,并作出了这样的自定义按钮:

<ion-toolbar>
    <ion-buttons slot="start">
        <ion-item lines="none" routerLink="/home">
            <ion-img src='path-to-your.png'></ion-img>
        </ion-item>
        <ion-text>About</ion-text>
    </ion-buttons>
</ion-toolbar>

那就调整一下风格,有点麻烦,但很值得.

shyt4zoc

shyt4zoc5#

我发现它的工作方式更干净..通过使用相同的离子按钮,但有一个图标内..它的清洁这种方式和工作刚刚正常..所有你需要做的是改变路线到以前的路线

<ion-buttons slot="start">
    <ion-buttons slot="start" routerLink="/payment">
      <ion-icon name="chevron-back-outline" class="xdsffdd"></ion-icon>
    </ion-buttons>
  </ion-buttons>

相关问题