logo标签列表

为什么ion-back-button没有显示？

ionic-frameworkionic4angular8
21
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显示出来呢？

9个回答
46

如果堆栈中没有页面，则

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

不会显示。如果您想要显示，则需要将特定页面添加到"defaultHref"属性中。

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

你需要从这里学习。

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

是的。问题集中在为什么navigateForward不会添加到堆栈中。（我将问题表述得更准确。） - feder
然后您需要路由器进行前进导航。 - Hassan Ali
Ionic堆栈只有2个页面吗？当我使用3级深度时，返回按钮没有显示。 - vinicius gati
Ionic可以自我管理。你能分享一下你的代码吗？ - Hassan Ali
11

如果没有前一个叠加层/页面显示，则不会可见

因此，您可以设置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();
}
什么是 modalCtrl？ - Srinath Kamath
@SrinathKamath 从ionic-angular包中实例化ModalController。 - Er. Kathrecha Krushnkumar
6

如果你遇到了这个问题，但是 ion-back-button 仍然没有出现，请检查你的页面模块中是否导入了 IonicModule。我曾经创建了一个 ion-header 的组件，但是 ion-back-button 没有出现。原因是我的 ComponentsModule （声明并导出所有组件的模块）只导入了 CommonsModule ，而没有导入 IonicModule。因此，请始终检查你的导入是否包含 IonicModule ，否则返回按钮将不会出现。

1
我遇到了类似的问题，只是对我来说Ionic模块存在，但是没有显示返回按钮的组件不在我的模块声明中。你的答案帮助我解决了这个问题。 - Donovan Solms
3

这是根页面吗？如果是，ion-back-button将不会显示。

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

1
defaultHref在这里没有用处。我只想在有人向前导航（例如进入详细页面）时显示返回按钮。我假设navCtr.navigateForward会添加到导航堆栈中。显然它并没有。还有其他编程方法吗？ - feder
这是哪一页（你提到的上面的代码）？这是根页面吗？还是您要前往的页面？ - arif08
它位于我的自定义组件app-header中，该组件在每个页面中都存在。因此，在主页和详细页中都可以使用。我认为这是可能的，因为该组件正在查看路由器对象。 - feder
1
你是否需要除了简单的返回导航之外的其他行为？如果不需要，那么你可以使用输入绑定。这样，每次添加详细页面时就不必更新模板了。 - arif08
2

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

但是，当点击时仍然不能加载到href。

1

解决方法。我通过URI路径进行程序决策。缺点是，如果应用程序添加了更多的详细页面，它们需要被添加（例如，在一个符合后退按钮路径的数组中）。

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

将Router对象添加到此组件的构造函数中
constructor(public router: Router) { }

如果有人仍然想知道为什么编程式导航不会添加到导航堆栈中，以便在详细页面上出现返回按钮，我很乐意倾听。
0
请确保您是通过修改路由历史记录的路由器链接到达该页面。否则，因为没有记录先前路由的历史记录，返回按钮将不会显示。
我的问题在于，我点击的链接将我带到了一个向前的页面，但其 routerDirection="none" 。所以没有先前的路由，所以我的返回按钮没有显示。
更改中。
<IonRouterLink routerDirection="none" routerLink={`/item/${item.id}`}>...</IonRouterLink>

到

<IonRouterLink routerDirection="forward" routerLink={`/item/${item.id}`}>...

问题已解决。

0

在花费了太多时间研究这个问题后，我发现还有另一种情况下，即使尝试了这里的每一个答案，ion-back-button 仍然不会显示。

原帖中提到，他们的返回按钮位于一个自定义组件 app-header 中。如果 app-header 包含一个 ion-header，那么 ion-back-button 就永远不会显示。 ion-header 必须是页面本身的 HTML 的一部分，而不是该页面内的组件。

例如：

<!-- tabs/tab1/child1.page.html -->
<app-header></app-header>


<!-- header.component.html -->
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

不起作用，返回按钮也不会显示。
<!-- tabs/tab1/child1.page.html -->
<ion-header>
  <app-header-toolbar></app-header-toolbar>
</ion-header>

<!-- header-toolbar.component.html -->
<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button></ion-back-button>
  </ion-buttons>
</ion-toolbar>

将按预期工作。

所以真正的罪魁祸首并不是ion-back-button，而是ion-header，当它放置在子组件中时，它并不按预期工作。

0

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

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

还有别忘了指定 href，将其添加到 HTML 文件中

<ion-buttons slot="start">
    <ion-back-button defaultHref="YourRouteHere"></ion-back-button>
</ion-buttons>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接