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

【问题标题】：How to show the back button on the particular page in Ionic如何在 Ionic 的特定页面上显示后退按钮
【发布时间】：2019-03-19 15:24:32
【问题描述】：

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

这是 app.component.html：

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

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

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

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

非常感谢任何帮助。

【问题讨论】：

@PeterHaddad。我正在使用公共标头，并且仅在 app.component.ts 中添加了它。

标签： ionic-framework ionic4

【解决方案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。

【讨论】：

但问题是我有共同的标题。并且后退按钮位于 app.component.html 中的标题中。
是的，你从那里删除标题并添加到这个共享工具栏中
你能告诉我在哪里添加架构吗？
在sharedtoolbar类的module.ts中
在declartion array下@ngmodule内

【解决方案2】：

你可以创建一个css类如：

.back-hide {
  display: none;
}

然后在返回按钮上使用ngClass，如果需要，应用样式。

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

【讨论】：

这个后退按钮在 app.component.ts 中，如果我在我的特定页面中添加了 css，它就不起作用了。
默认情况下我想隐藏后退按钮。
你能帮帮我吗？

【解决方案3】：

您可以在要显示返回按钮的位置使用ion-nav，而不是使用ion-toolbar。
默认情况下，ion-nav 会根据模式（ios 或材料设计）为页面之间的过渡设置动画。

【讨论】：