0

I'm currently trying to figure out how to go back a page on Ionic 4. I created an Ionic 4 project which I think defaults to the router for navigation.

App opens up on home, steps that I am taking:

1) Select menu option

2) Gets navigated to selected item from #1 (Page 1)

3) In page 1, you can go back via ion-back-button defaultHref. In this page, there is an ion-list where I can click and view more details

4) Click on an item which takes me to Page 2 (You can also go back here)

5) In Page 2, there is another list where you can click

6) click on an item which takes you to Page 3.

Example:

=> Home => Fruits List => Type of Oranges List => Detail of selected type of orange

This is now the final page. What I'm trying to do is, once an item is clicked on step no. 6, if the data cannot be loaded then display an alert which has the button 'Close'. I am trying to bind this alert button with the action to go back.

An answer I found was to use the Location service and bind this action:

this.location.back();

Which I have but this takes the user all the way back to Home instead of the previous page. Another answer was to use the NavController but wouldn't I need to completely change the routing of my app to use that? Is there any way to go back to the previous page?

This is what I use to navigate forwards to page:

this.router.navigate(['page1'],{replaceUrl: false});

I could use the same thing for going back but it doesn't have the correct animation and I think the routing gets messed up if I use to go back.

UPDATE

Running Ionic Version 5.4.1

More information:

this.alertCtrl
  .create({
    header: 'Error',
    message: 'Failed to Load Data. Please try again later.',
    buttons: [
      {
        text: 'Close',
        handler: () => {
          this.location.back(); // Return to Home instead of Page 2 (the previous page)
        }
      }
    ]
  })
  .then(alertEl => {
    alertEl.present();
  });

This works fine but its not what I want since I am doing it programatically when the alert close button is clicked:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
        <ion-back-button defaultHref="/page2"></ion-back-button>
    </ion-buttons>
    <ion-title>

    </ion-title>
  </ion-toolbar>
</ion-header>

Still no answer

J.Do
  • 303
  • 6
  • 26

0 Answers0