Ionic 4 Angular返回按钮如何返回到上一页而不是根页面？

Question

我有一个使用Ionic 4的小应用，其中包含2个选项卡和1个详细页面。 这里我面临的问题是，如果我从选项卡2进入详细页面，然后使用ion-back-button返回，它总是将我重定向到选项卡1，而不是之前所在的选项卡2。

这是我的示例：

选项卡2 Html： 这里有一个简单的ion-item，带有一个点击事件：

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

它调用openChat函数，其工作原理如下：

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

现在它会打开我的聊天详情页面，在其中我已经放置了一个返回按钮以便导航返回，像这样：

现在它会打开我的聊天详情页面，在其中我已经放置了一个返回按钮以便导航返回，像这样：

    <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。

是否有任何方法可以覆盖返回事件以返回到之前的页面？

- Lukas R.

---

这个问题已经被修复了：https://github.com/ionic-team/ionic/releases/tag/v4.3.0 - Guilherme Meinlschmiedt Abdo

Answer 1

更新:

Ionic 团队已经在版本 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();
}

- Sampath

---

@LukasR。已完成。 - Sampath

所以基本上这个不再“开箱即用”了？我们必须创建一个函数来跟踪我们的位置？ - Judson Terrell

@JudsonTerrell 请创建一个新的问题，并附上您的用例。 - Sampath

太棒了，这个方法真的很有效！我已经苦思冥想了几个小时了。干杯！ - coderpc

使用 location.back() 不会有动画效果。 - huan feng

Answer 2

你可以使用 NavController 完成此操作。对我来说它的工作非常完美。

---

第一步：

在你的 .ts 文件中导入 NavController

import { NavController } from '@ionic/angular';

---

第二步：

将它添加到你的构造函数里面

contructor( private navCtrl: NavController ){}

---

第三步：

在你的方法中使用它

openChat() {
    this.navCtrl.back();
}

步骤四：

在你的.html文件中

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

这段代码是关于IT技术方面的内容，用于网页开发。

- Shurvir Mori

---

仍在2023年工作。非常有帮助。 - Najam Us Saqib

是的 @NajamUsSaqib - Shurvir Mori

Answer 3

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

在构造函数中添加public navCtrl：NavController。

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

- Satish Varre

Answer 4

你应该进行导航

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

routerDirection="forward"将detailPage堆叠在Tabs页面上，您将被导航回正确的选项卡页面。

:}

- Mohammad Ayoub Khan