为什么没有显示离子返回按钮？答案

【问题标题】：Why is the ion-back-button not shown?为什么没有显示离子返回按钮？
【发布时间】：2021-08-09 19:06:26
【问题描述】：

ion-back-button 不会显示在ion-menu-button 的右侧。这是为什么呢？

ion-menu-button 和 ion-title 正确显示并在同一水平位置对齐。

<ion-header>
  <ion-toolbar>

    <ion-buttons slot="start">
      <!-- navigation button-->
      <ion-menu-button></ion-menu-button>
      <!-- optional back button-->
      <ion-back-button></ion-back-button> 
    </ion-buttons>

    <ion-title>
        {{ pageTitle | translate}}
    </ion-title>

  </ion-toolbar>
</ion-header>

在 DOM 检查器中，ion-back-button 的 CSS display 属性设置为 none。为什么它会将自己设置为none？

我用过

this.navCtrl.navigateForward('/term/' + term);

导航到此页面，因此我希望后退按钮可以选择此页面。为什么navigateForward 没有添加到堆栈中，这会使ion-back-button 显示？

【问题讨论】：

标签： ionic-framework ionic4 angular8

【解决方案1】：

如果Stack中没有页面那么

<ion-back-button></ion-back-button>

不会显示。如果要显示则需要在“defaultHref”属性中添加特定页面。

<ion-back-button defaultHref="logout"></ion-back-button>

你需要向here学习

https://ionicframework.com/docs/api/back-button

【讨论】：

是的。问题在于为什么 navigateForward 不会添加到堆栈中。（我更准确地表达了我的问题。）
那么你需要路由器进行前向导航。
离子栈只有两页？当我使用 3 级深度时，后退按钮不显示
离子管理它自己。你能分享你的代码吗？

【解决方案2】：

如果没有以前的覆盖/页面显示，它将不可见

所以你可以设置 css

ion-back-button {
   display: block;
}

然后在元素上添加click事件

<ion-back-button (click)="close()">
    <ion-icon name="close"></ion-icon>
</ion-back-button>

添加.ts文件

click() {
  this.modalCtrl.dismiss();
}

【讨论】：

【解决方案3】：

是根页面吗？如果是这样，离子后退按钮将不会出现。

尝试添加属性defaultHref。例如：<ion-back-button defaultHref="home"></ion-back-button>。无论没有导航堆栈，它都应该显示出来。

【讨论】：

defaultHref 在这里没有用。如果有人向前导航（例如进入详细信息页面），我只想显示后退按钮。我假设 navCtr.navigateForward 会添加到导航堆栈中。显然它没有。还有其他程序化方式吗？
这是什么页面（你上面提到的代码）？这是根页面吗？或者这是您前进到的页面？
它在我的自定义组件 app-header 中，它在每个页面中。因此在主页和详细信息页面中。我认为这是可能的，因为组件正在查看路由器对象。
除了导航返回之外，您还想要其他任何行为吗？如果没有，那么您可以使用输入绑定。这样您就不必在每次添加详细页面时都更新模板。

【解决方案4】：

对于遇到此问题且 ion-back-button 仍未出现的任何人，请检查您是否已在页面模块中导入了 IonicModule。我碰巧为ion-header 创建了一个组件，而ion-back-button 没有出现。这是因为我的ComponentsModule （声明和导出我所有组件的那个）仅导入了 CommonsModule 而没有 @ 987654327@。因此，请务必在您的导入中检查 IonicModule。否则返回按钮不会出现

【讨论】：

我遇到了类似的问题，只对我来说 IonicModule 在那里，但没有显示后退按钮的组件不在我的模块声明中。你的回答帮助我解决了这个问题。

【解决方案5】：

解决方法。我以编程方式决定使用 URI 路径。缺点，如果向应用程序添加更多详细信息页面，则需要添加它们（例如，在返回按钮限定路径的数组中）。

<ion-button *ngIf="router.url.includes('/term/')"><ion-icon name="arrow-back"></ion-icon></ion-button>

将Router Object添加到该组件的构造函数中

constructor(public router: Router) { }

如果有人仍然想出为什么程序化导航没有添加到导航堆栈中 - 这样后退按钮会出现在详细信息页面上 - 我很乐意倾听。

【讨论】：

【解决方案6】：

所以 Ionic 开发人员使生活变得复杂，现在 (Ionic5) 属性称为 default-href 而不是 defaultHref。

但是点击的时候还是没有加载到href。

【讨论】：

【解决方案7】：

只需要在scss文件中添加颜色即可显示。

ion-back-button{
  --color: black;
}

另外别忘了标明href，添加html文件

<ion-buttons slot="start">
    <ion-back-button defaultHref="YourRouteHere"></ion-back-button>
</ion-buttons>

【讨论】：