Ionic 4 Angular 返回上一页而不是 root 按钮？

Question

我有一个带有 2 个选项卡和 1 个详细信息页面的 Ionic 4 小应用程序。我在这里面临的问题是，如果我从 Tab2 转到详细信息页面，然后从那里返回 ion-back-button，它总是将我重定向到 Tab1 而不是我之前所在的 Tab2。

这是我的例子：

选项卡 2 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>

但是，当我单击此按钮时，它不只是 "pop" 页面，就像在 Ionic3 中一样，而是将我定向到我的应用程序的根页面，即 Tab1。

有什么方法可以覆盖返回事件以转到我之前所在的页面吗？

Answer 1

更新：

Ionic 团队已在版本上修复此问题：4.3.0

旧

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

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

The url to navigate back to by default when there is no history.

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="forward" 在标签页上堆叠 detailPage，您将被导航回右侧标签页

:}

Answer 3

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

在构造函数中添加publicnavCtrl:NavController

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

Answer 4

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

第 1 步：

在您的 .ts 文件中导入 NavController

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

第 2 步：

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

contructor( private navCtrl: NavController ){}

第 3 步：

在你的方法中使用它

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

第 4 步：

在您的 .html 文件中

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

Ionic 4 Angular 返回上一页而不是 root 按钮？

Ionic 4 Angular Back Button to previous page instead of root?

routing

back-button

angular

ionic4

第 1 步：

第 2 步：

第 3 步：

第 4 步：