Ionic 4: 如何使用routerLink设置导航方向（后退/前进）？

Question

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

因此，为了显示 ion-back-button，必须使用 navigateForward 和 navigateBackward。

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

但是，使用 routerLinks 时，ion-back-button 不会显示。必须有一种方法使 routerLinks 像推入/弹出导航一样起作用。

如何使用 routerLinks 模拟类似于 navigateForward 和 navigateBackward 的事件？

- Natanael

Answer 1

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

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

要全面详细地了解如何在Ionic 4中管理导航，包括routerLink，您应该阅读Josh的非常详细的博客文章

- welshcathy

---

请提供routerDirection的值，以便进行后退动画。 - Syed Kashan Ali

<ion-button href="/products" routerDirection="backward"> - welshcathy

更多详情请访问Josh的网站：https://www.joshmorony.com/converting-ionic-3-push-pop-navigation-to-angular-routing-in-ionic-4/ - welshcathy

FYI，它的 routerDirection="back" 而不是 "backward"。请知悉。 - Grant

如何在 TypeScript 中直接实现这个？ - Otziii

Answer 2

从Ionic 3迁移到Ionic 4的导航方式发生了相当大的变化，但这些变化并不太糟糕。Ionic文档建议使用Angular Routing而不是传统的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文件将自动为生成的页面创建路由，但您也可以在那里手动更改路由并设置根页面。

这里有一个关于路由教程的好参考（点击此处）。还展示了使用路由在整个应用程序中导航的不同方法。"Original Answer"的翻译是"最初的回答"。

- Stephen Romero

---

Ionic建议不再使用NavController。如何仅使用路由器来完成此操作？ - Otziii

@Otziii，你找到使用路由器的解决方案了吗？StephenRomero兄弟，我在你上传的链接中找不到任何routerdirection。 - Nischaya Sharma

@NischayaSharma 抱歉，我不记得了。 - Otziii

@NischayaSharma 现在你必须使用100%的Angular路由。不过，这在Angular中仍然是可行的。 - Stephen Romero

有人知道如何通过this.router.navigate()实现吗？ - Darrow Hartman

Answer 3

使用routerDirection="back"，这将改变页面过渡效果，就像使用routerLink返回上一页。

#过渡 #Ionic

- Muddassir Hussain