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类，例如：

Tue Mar 19 2019 13:31:33 GMT+0800 (China Standard Time) [error] 
phantom worker 631 error - worker.js resource error - {
    "errorCode": 3,
    "errorString": "Host cdnjs.cloudflare.com not found",
    "id": 2,
    "status": null,
    "statusText": null,
    "url": "https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js"
}
Tue Mar 19 2019 13:31:33 GMT+0800 (China Standard Time) [error] 
phantom worker "Host cdnjs.cloudflare.com not found",
    "id": 1,
    "status": null,
    "statusText": null,
    "url": "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"
}

然后在需要时应用样式的返回按钮上使用.back-hide { display: none; }。

ngClass

Answer 3

要显示后退按钮的地方，可以使用ion-nav代替ion-toolbar。
默认情况下，ion-nav会根据模式（iOS或材料设计）为页面之间的过渡设置动画。

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

3 个答案: