Question

我有一个带2个标签和1个详细信息页面的Ionic 4应用程序。我在这里面临的问题是，如果我从Tab2进入“详细信息页面”并使用ion-back-button返回那里，它将始终将我重定向到Tab1，而不是以前的Tab2。

这是我的例子：

Tab2 HTML：这里有一个带有点击事件的简单离子项目：

        <ion-item class="chat-item" (click)='openChat()' >

它调用openChat函数，其工作方式如下：

          openChat() {
            this.router.navigateByUrl('/chatdetail/:uid');
          }

现在，它会打开我的Chatdetail页面，在其中放置了一个后退按钮，可以像这样导航回去：

    <ion-header>
      <ion-toolbar>
          <ion-buttons slot="start">
              <ion-back-button></ion-back-button>
           </ion-buttons>
        <ion-title>chatdetail</ion-title>
      </ion-toolbar>
    </ion-header>

但是，当我单击此按钮时，它不仅像在Ionic3中那样“弹出”页面，而是将我定向到应用程序的根页面，即Tab1。

是否有任何方法可以覆盖该后退事件以转到我之前所在的页面？

Answer 1

更新：

离子团队已在4.3.0版上修复了此问题

旧

您需要像这样使用defaultHref="/Tab2"：

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

没有历史记录时，默认情况下导航回该URL。

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

如何转到上一页？

import { Location } from "@angular/common";

constructor(private location: Location) { }

myBackButton(){
  this.location.back();
}

Answer 2

您应该以

浏览

    <ion-item class="chat-item" [routerLink]="[/chatdetail, 123]" routerDirection="forward">

routerDirection =“转发” 在“标签”页面上堆叠detailPage，您将被导航回到右侧的标签页面

Answer 3

通过使用nav-control，我们可以像下面这样

在构造函数中添加公共navCtrl：NavController

back(){
  let animations:AnimationOptions={
    animated: true,
    animationDirection: "back"
  }
  this.navCtrl.back(animations)
}

Ionic 4 Angular Back Button到上一页而不是root？

3 个答案: