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

Question

Ionic 4 now uses Angular router. Altough it still has its own NavControler, which helps to simulate push / pop navigation style though the navigateBackward and navigateForward methods.

So that ion-back-button is shown it is necessary to use navigateForward and navigateBackward, I think.

In my application I prefer to use routerLinks to navigate (so that the user can open the page in another tab) instead of navController.

But with routerLinks the ion-back-button does not appears. There must be an way to make routerLinks act like push/pop navigation.

How could I simulate an event like navigateForward and navigateBackward using routerLinks?

Answer 1

You can use the attribute routerDirection on your view element. For example

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

For a full detailed description of how to manage navigation in Ionic 4 including routerLink you should read Josh's very detailed blog post

Answer 2

Moving from Ionic 3 to Ionic 4 with navigating has changed up quite a bit, but the changes aren't too bad. The Ionic Docs recommend to switch to Angular Routing instead of the traditional Ionic pop and push. There are a couple of way to route your pages, but I think the easiest to understand is using the navigateForward() and navigateBack() functions in the .ts file.

Ex.

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

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

Of course navigating forward and backward has to do with the structure of how your app is build from the stack.

The app-routing.module.ts file will automatically create the routes for your generated pages, but you can manually change the routes there as well as set a root page.

A good reference to routing tutorials here. Also shows different ways to navigate using routes throughout your app.