angular - 如何通过点击事件使用 Ionic 的 RouterDirection？

Question

当从一个页面路由到另一个页面时，首先使用的技术是routerLink + routerDirection。在第一段代码（#1）中，我们从一页到下一页，方向为forward。当我们想回到原来的页面时，在第二段代码（#2）中，我们必须在路由器的状态下传递数据。所以我们使用一个click事件来处理路由。

使用单击事件(#2)进行第二次导航时会出现问题。我们失去了触发 routerDirection 来使用back动画的能力。该页面正在向前发展（参见下面的示例#3）。

有没有办法用routerDirection + click事件触发back动画？

当我在这里查看文档时，Angular NavigationExtras 不提供此功能： https ://angular.io/api/router/NavigationExtras

#1 | 使用 routerLink 路由到页面

<ion-button fill="clear" routerLink="/chat-settings" routerDirection="forward">
  <ion-icon color="light" name="add-circle"></ion-icon>
</ion-button>

#2 | 使用点击事件返回

<ion-button (click)="goToChat()" routerDirection="back"> <!-- routerDirection does nothing -->
  <ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>

goToChat() {
  this.router.navigateByUrl('/chat/' + this.chatID, {
    state: {
      // ...
    },
  });
}

#3 | 直播设备

标签： angularionic-frameworkionic4

Answer 1

您可以使用 NavController 的navigateBack()功能来实现这一点，该功能router.navigateByUrl()在引擎盖下使用，如您在此处看到的那样。您的goToChat()函数将如下所示：

goToChat() {
  this.navController.navigateBack('/chat/' + this.chatID, {
    state: {
      // ...
    },
  });
}