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

Question

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

这是app.component.html：

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

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

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

我还添加了[hidden]="menuIsHidden"并默认为false并且在某些特定页面上为true但这也无法正常工作。

任何帮助深表感谢。

Answer 1

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

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 2

您可以创建一个css类，例如：

.back-hide {
  display: none;
}

然后在后退按钮上使用ngClass，如果需要，可以应用样式。

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

Answer 3

你想要显示后退按钮你可以使用qazxsw poi而不是使用qazxsw poi。 默认情况下，qazxsw poi动画基于模式（ios或材料设计）的页面之间的过渡。