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

Question

Ionic 4现在使用Angular路由器。尽管它仍然有自己的NavController，它有助于通过导航Backward和navigateForward方法模拟推/弹导航样式。

因此，显示离子后退按钮，我认为有必要使用navigateForward和navigateBackward。

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

但是使用routerLinks时，不会出现离子后退按钮。必须有一种方法可以使routerLinks像推/弹导航一样。

我如何使用routerLinks模拟navigateForward和navigateBackward等事件？

Answer 1

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

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

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

Answer 2

通过导航从Ionic 3移动到Ionic 4已经发生了很大变化，但变化并不是太糟糕。 Ionic Docs建议切换到Angular Routing而不是传统的Ionic pop和push。有两种方法可以路由您的页面，但我认为最容易理解的是在.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的一个很好的参考。还显示了使用整个应用中的路线进行导航的不同方式。