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

【问题标题】：Ionic 4 Angular Back Button to previous page instead of root?Ionic 4 Angular Back Button到上一页而不是root？
【发布时间】：2019-07-20 09:29:24
【问题描述】：

我有一个带有 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。

有没有办法覆盖那个返回事件以转到我之前的页面？

【问题讨论】：

这是由github.com/ionic-team/ionic/releases/tag/v4.3.0修复的

标签： angular routing back-button ionic4

【解决方案1】：

更新：

Ionic 团队已在 Ver: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();
}

【讨论】：

所以事实上，如果我向前导航，我必须跟踪我从哪里开始并将其传递到新页面，这样我才能返回到旧页面？ Ionic 3 自己处理了这个完美的问题。与 ionic 3 相比，这对于具有许多页面和大量工作的移动开发来说真的很糟糕
您现在可以用这个更新您的答案吗：这是由 github.com/ionic-team/ionic/releases/tag/v4.3.0 修复的
@LukasR。做到了。
所以基本上这不再“开箱即用”了？我们必须创建一个函数来跟踪我们在哪里？
伙计，这很有魅力！一直在敲我的头好几个小时。干杯。

【解决方案2】：

你应该导航

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

routerDirection="forward" 在 Tabs 页面上堆叠 detailPage，您将被导航回右侧的标签页

【讨论】：

【解决方案3】：

通过使用导航控制，我们可以像下面一样返回

在构造函数中添加 public navCtrl: NavController

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

【讨论】：

【解决方案4】：

您可以为此使用NavController。它非常适合我。

第 1 步：

在您的 .ts 文件中导入 NavController

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

第二步：

将其添加到您的构造函数中

contructor( private navCtrl: NavController ){}

第三步：

在你的方法中使用它

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

第四步：

在您的 .html 文件中

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

【讨论】：