ion-back-button 在 Ionic 7 中的 Android 设备上不显示，但可以在浏览器中使用

Question

我想知道为什么 ion-back-button 没有显示在 Android 设备上的 Ionic 7 应用程序中，尽管它在浏览器中工作正常。我检查了页面、选项卡和路由文件的结构，但找不到任何原因。我从我的

home.page

导航到我的 tabs.page，其中包含子项 a、b 和 c。

这里是我的理解代码：

a.page.html

、

b.page.html

、

c.page.html

（选项卡）=>

ion-back-button

不显示在工具栏中

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>Gruppe</ion-title>
  </ion-toolbar>
</ion-header>

tabs.page.html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="a">
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="b">
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="c">
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

app.routes.ts

export const routes: Routes = [
  {
    path: 'home',
    component: HomePage,
  },
  {
    path: 'tabs/:id',
    component: TabsPage,
    children: [
      {
        path: 'a',
        component: APage,
      },
      {
        path: 'b',
        component: BPage
      },
      {
        path: 'c',
        component: CPage
      },
      {
        path: "",
        redirectTo: 'a',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: "",
    redirectTo: 'home',
    pathMatch: 'full',
  }

只需使用工具栏中带有 routerLink="/home" 的常规按钮即可解决此问题。 ion-back-按钮被该页面上的 Ionic 隐藏

Answer 1

解决方案：

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons class="btns" slot="start">
      <ion-button (click)="goHome()" class="btn">
        <ion-icon class="ico" name="chevron-back"></ion-icon>
        <p class="backText">Back</p>
      </ion-button>
    </ion-buttons>
    <ion-title>Gruppe</ion-title>
  </ion-toolbar>
</ion-header>

以及使按钮看起来像 ios 后退按钮的样式：

.btns{
    padding-left: 0px;
    margin-left: -9.5px;
    .btn{
        padding-left: 0px;
        margin-left: 0px;
        text-transform: none;

    }

}
.backText{
    padding-left: 1px;
    margin: 0px;
}

.ico{
    font-size: 27px;
    padding-bottom: 1px;
}

打字稿：

goHome(){
    this.navCtrl.navigateBack('/home');
  }