8

I'm developing an app using Ionic 4 with Angular router. I would like to navigate to another page and clear the page stack. In Android native, it's something like this:

Intent intent = new Intent(NewActivity.this, MainActivity.class);
intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
startActivity(intent);

From what I've read so far, it is possible using Ionic NavController but it is deprecating in Ionic 4. I learnt about buttons with routerLink but if I'm not mistaken, by using that the app will immediately navigate to the other page. I need to execute some logic before navigating to another page .

For example: Login page. After successful login, the user shouldn't be able to go back to the login page. Also, by clicking the 'login' button, it should call a function to process the login and decide to navigate/not navigate to another page.

Is there any way that I can achieve this with Angular router or do I need to rely on the deprecating Ionic NavController?

Improve this question
2
  • 1
    I had to kneel down to NavController for this issue. its not fully deprecated, you can still use it. or else you can use ionViewWillLeave() to empty your stack. Commented Mar 8, 2019 at 7:19
  • @Najamussaqib I guess until I found the solution for Angular router, I'll just use NavController for now Commented Mar 11, 2019 at 2:38

3 Answers 3

Reset to default
20

For example of a login page, which is a root page ('/login'), after clicking the login button navigate to a new page like this:

onLogin() {
   this.router.navigateByUrl('/profile', { replaceUrl: true }) 
}

It replaces the page history entry with a new URL, in this particular case with '/profile'. After using a plain <ion-back-button></ion-back-button> or the browser's back button, you will not be redirected to the login page but to the preceding page. Let's say your page navigation is like this: home -> login -> profile, but the history will remember only home -> profile, thus hitting the back button at profile page will take you back to home.

For a complete solution, you can combine this with Angular Route Guards, to prevent accessing pages based on some conditions (e.g. user is logged in). Hints how to do it can be found in this answer.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

my condition is, say I'm in X page and on some condition I navigate to Y page using navigateByUrl. Now from Y page if I click back button, I shouldn't be going to X page. I must be going to some other page. I had a thought like clear navigation stack and add pages to stack programatically, but I did not find any material for that. Can you suggest something ?
9 
this.router.navigateByUrl('/login', { skipLocationChange: true });

Navigates without pushing a new state into history.

https://angular.io/api/router/NavigationExtras

Improve this answer

3 Comments

It works on browser but not when deployed to device. I wonder why.. I need it to work on devices though.
Update: It actually works but not on root page. Let's say login page is my root page & I'm navigating from login page to home page, it wont work. Login page will still be in history.
skipLocationChange didn't add the target page in history. It's a matter of context if you want to use replaceUrl which remove the current page in history and replace it with the next one, or skipLocationChange. skipLocationChange if great if you know you're navigating to a transient page (say a tutorial screen that show no be navigated back, or a confirmation screen that will auto-redirect).replaceUrl is great if you're on a page like login page that should not be navigated back anymore (like after a successful login).
4

Tried may different approaches but the only one that worked was

this.navController.navigateRoot('/main/tabs/forms');

I used it after finishing my authentication process.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.