如何在 Ionic 的特定页面上显示后退按钮

Question

我在我的 Ionic 4 应用程序中工作，我在我的工具栏中添加了一个后退按钮，我只想在某些特定页面上显示后退按钮。

这是app.component.html:

<ion-back-button class="btnmy11" defaultHref="/"></ion-back-button>

我只想在某些特定页面上显示后退按钮。

我添加了 CSS 以在某些特定页面上显示后退按钮，但它不起作用。

我还添加了 [hidden]="menuIsHidden" 并将其默认设置为 false，在某些特定页面上设置为 true 但这也不起作用。

非常感谢任何帮助。

Answer 1

您可以创建 css class 例如：

.back-hide {
  display: none;
}

然后在需要时应用样式的后退按钮上使用 ngClass。

<ion-back-button class="btnmy11" defaultHref="/" [ngClass]="{'back-hide': menuIsHidden==true}"></ion-back-button>

Answer 2

通过执行以下命令创建页面：

ionic generate page SharedToolbar

然后在该页面内使用 @Input() 指令，例如：

html:

<ion-header>
<ion-toolbar>
 <ion-buttons slot="start">
  <div *ngIf="showBackButton== 'true'">
  <ion-back-button></ion-back-button>
  </div>
</ion-buttons>

打字稿：

@Component({
 selector    : 'shared-toolbar',
 templateUrl : './shared-toolbar.page.html',
 styleUrls   : ['./shared-toolbar.page.scss'],
 })
export class SharedToolbar implements OnInit 
{
  @Input() showBackButton: string  = 'false';
  constructor() { }
  ngOnInit(){}
}

然后在您创建的任何页面中，您可以在html中添加以下内容：

<shared-toolbar showBackButton="true"></shared-toolbar>

并像上面那样发送以下属性以显示后退按钮。

注：

在每个页面的模块中，您可能需要添加以下内容：

  schemas : [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],

能够使用特定页面的模板URL。

更多信息在这里：

https://angular.io/guide/attribute-directives#pass-values-into-the-directive-with-an-input-data-binding

Answer 3

在您想要显示后退按钮的位置，您可以使用 ion-nav 而不是 ion-toolbar。
默认情况下 ion-nav 基于模式（ios 或 material 设计）在页面之间动画转换。

如何在 Ionic 的特定页面上显示后退按钮

How to show the back button on the particular page in Ionic

ionic-framework

ionic4