Is it possible to stop router navigation based on some condition

Question

I'm new to angular, I want stop the routing when user clicks on refresh button or back button based on some condition. I don't know whether this is possible, if anybody knows help me

constructor(private route: Router) {
    this.route.events
        .filter(event => event instanceof NavigationEnd)
        .pairwise().subscribe((event) => {
            if (expression === true){
                // stop routing 
            } else {
                // continue routing
            }      
        });
}

Can it be possible? If yes, how can I do this?

Answer 1

I stumbled upon this question quite a bit after the fact, but I hope to help someone else coming here.

The principal candidate for a solution is a route guard.

See here for an explanation: https://angular.io/guide/router#candeactivate-handling-unsaved-changes

The relevant part (copied almost verbatim) is this implementation:

import { Injectable }           from '@angular/core';
import { Observable }           from 'rxjs';
import { CanDeactivate,
         ActivatedRouteSnapshot,
         RouterStateSnapshot }  from '@angular/router';

import { MyComponent} from './my-component/my-component.component';

@Injectable({ providedIn: 'root' })
export class CanDeactivateGuard implements CanDeactivate<MyComponent> {

  canDeactivate(
    component: MyComponent,
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | boolean {
    // you can just return true or false synchronously
    if (expression === true) {
      return true;
    }
    // or, you can also handle the guard asynchronously, e.g.
    // asking the user for confirmation.
    return component.dialogService.confirm('Discard changes?');
  }
}

Where MyComponent is your custom component and CanDeactivateGuard is going to be registered in your AppModule in the providers section and, more importantly, in your routing config in the canDeactivate array property:

{
  path: 'somePath',
  component: MyComponent,
  canDeactivate: [CanDeactivateGuard]
},

Edit: Given that this question has quite a bit of traction and that many people seems to be requesting a solution to a different but related problem (how to add guards to a set of routes), I'm adding here a small helper function to add a set of guards to all of them:

// the Pick<...> syntax could be extended or replaced with a Partial<Route>
function withGuards<T extends Route | Routes>(input: T,
    guards: Pick<Route, 'canActivate' | 'canDeactivate'>): T {
  const routes: Route[] = Array.isArray(input) ? input : [input];
  for (let route of routes) {
    // if an object already exists, we do not replace the configured guards. meant to allow overrides for specific entries.
    Object.entries(guards).forEach(([prop, guard]) => {
      if (route && !route[prop]) route[prop] = guard;
    });
    if (route?.children) {
      withGuards(route.children, guards);
    }
  }

  return input;
}

// usage:

const route = withGuards({
    path: 'somePath',
    component: MyComponent
  }, {
    canDeactivate: [CanDeactivateGuard]
  });

This method will inject the guard in all the provided route(s) and in all their nested children, recursively.

Answer 2

There is another solution which I invented and it works:

(For lazy people like me who do not want to create guard for handling this)

import { NavigationStart, Router } from '@angular/router';

In constructor:

constructor(private router: Router) {
    router.events.forEach((event) => {
      if (event instanceof NavigationStart) {
        /* write your own condition here */
        if(condition){
          this.router.navigate(['/my-current-route']); 
        }
      }
    });
  }

Hopefully you won't be lazy enough to change '/my-current-route' to your route url.

Answer 3

The easy way for me is with skiplocationchange in a new route navigate like this:

if(condition === true){

  const currentRoute = this.router.routerState;

  this.router.navigateByUrl(currentRoute.snapshot.url, { skipLocationChange: true });
  // this try to go to currentRoute.url but don't change the location.

}else{
  // do nothing;
}

is a no beautiful method but works

Answer 4

I had a similar challenge trying to include a checkbox that would programmatically enable and disable routing.

I tried the solutions of to navigateByUrl to the same location but it seemed a bit inconsistent when trying to navigate to any other routes afterwards

So instead I created two route guards, and programmatically reset the route config when the checkbox was toggled

Guards

@Injectable({ providedIn: "root" })
export class RouterDisableGuard implements CanActivate {
  canActivate() {
    return false;
  }
}

@Injectable({ providedIn: "root" })
export class RouterEnableGuard implements CanActivate {
  canActivate() {
    return true;
  }
}

Service

this.router.resetConfig(
      this.router.config.map((r) => {
        if (!r.redirectTo) {
          r.canActivate = enabled ? [RouterEnableGuard] : [RouterDisableGuard];
        }
        return r;
      })
    );

Answer 5

You can use NavigationStart event like the following code snippet.

this.router.events.subscribe( (event: any) => {
   if (event instanceOf NavigationStart) {
      /// Your Logic
   }
})