Question

Ionic 4现在使用Angular路由器。尽管它仍然拥有自己的NavControler，但它可以通过NavigationBackward和NavigationForward方法来模拟推/弹出导航样式。

我认为，为了显示离子后退按钮，有必要使用NavigationForward和NavigationBackward。

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

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

如何使用routerLinks模拟类似NavigationForward和NavigationBackward的事件？

Answer 1

您可以在视图元素上使用属性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的很好的参考。还显示了在整个应用中使用路线进行导航的不同方式。

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

2 个答案: