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

user_6435458 0
Viewed 35339

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?

routerlink angular7 angular-ui-router ionic4 direction
3 Answers

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

user_11017280

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.

user_60009660

use routerDirection="back" this will change the page transition like going back with your routerLink

#transition #ionic

user_172405750
Related