Ionic 4 router destroy page programmatically

user_2230430 0
Viewed 8303

I have a sign up flow on my app. At each step I don't want the user to be able to go to the previous page, however, ionic keeps these pages "alive" and the user is able to go back either by swiping from left to right or using the back button on their phone.

I transition each user using ionic's routing system:

 this.router.navigateByUrl('/invite');

I've also tried:

 this.router.navigate(['/invite']);

and: 

 this.router.navigateByUrl('/invite', { skipLocationChange: true });

It's causing me a lot of problems at the moment and I've done quite a bit of Googling and couldn't find any solutions.

Is there a way using ionic's router system to destroy a page or disallow backward navigation on some pages? Any advice would be great. Thank you.

angular-router ionic4 ionic-framework angular
3 Answers

You probably solved this already, however you can use the following as well:

this.router.navigateByUrl('/invite',{
 replaceUrl : true
});
user_82787350

You have to use ionic navigation for that, they provide the functionalities.

Inject navController in constructor.

  constructor(
    private navCtrl: NavController,
  ) {
  }

Then use navigateroot, it will destroy previous page

this.navCtrl.navigateRoot('/home', { animated: true, animationDirection: 'forward' });

Go through below documentation

https://ionicframework.com/docs/angular/navigation

user_101603960

You can use route-guard

This is good Example Go throuh it

https://alligator.io/angular/route-guards/

in your routing module add

const myRoutes: Routes = [
  { path: '', component: yourHomeComponent },
  { path: 'dashboard',
    component: anyComponentComponent,
    canActivate: [CanActivateRouteGuard]
  }
];

make your simple route gurd

import { Injectable } from '@angular/core';
import { CanActivate,
         ActivatedRouteSnapshot,
         RouterStateSnapshot } from '@angular/router';

import { MyAuthService } from './auth.service';

@Injectable()
export class _CanActivateRouteGuard implements CanActivate {

  constructor(private auth: MyAuthService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
      return this.auth.isUserAuthenticated();
  }
}
user_61831130
Related