Ionic 4：如何使用 routerLink 设置导航方向（backward/forward）？

Question

Ionic 4 现在使用 Angular 路由器。虽然它仍然有自己的 NavControler，这有助于通过 navigateBackward 和 navigateForward 方法模拟推送/弹出导航样式。

为了显示 ion-back-button，我认为有必要使用 navigateForward 和 navigateBackward。

在我的应用程序中，我更喜欢使用 routerLinks 来导航（以便用户可以在另一个选项卡中打开页面）而不是 navController。

但是使用 routerLinks 后退按钮不会出现。一定有办法让 routerLinks 像 push/pop 导航一样工作。

如何使用 routerLinks 模拟像 navigateForward 和 navigateBackward 这样的事件？

Answer 1

从带导航的 Ionic 3 移动到 Ionic 4 已经发生了很多变化，但变化还不错。 Ionic 文档建议切换到 Angular 路由，而不是传统的 Ionic 弹出和推送。有几种路由页面的方法，但我认为最容易理解的是使用 .ts 文件中的 navigateForward() 和 navigateBack() 函数。

例如

navigateForward(){
    this.navCtrl.navigateForward('/route of the page you want to navigate to');
  }

<ion-button large block (click)="navigateForward()">
      Navigate Forward
</ion-button>

当然，向前和向后导航与您的应用程序从堆栈构建的结构有关。

app-routing.module.ts 文件会自动为您生成的页面创建路由，但您可以在那里手动更改路由以及设置根页面。

很好的路由教程参考 here。还展示了在整个应用中使用路线进行导航的不同方式。

Answer 2

您可以在视图元素上使用属性 routerDirection。例如

  <ion-button [routerLink]="['/details']" routerDirection="forward" >
    Go forward
  </ion-button>

有关如何在 Ionic 4 中管理导航（包括 routerLink）的完整详细说明，您应该阅读 Josh's very detailed blog post

Ionic 4：如何使用 routerLink 设置导航方向（backward/forward）？

Ionic 4: How to set navigation direction (backward/forward) using routerLink?

direction

angular-ui-router

routerlink

ionic4

angular7