Dynamically register canDeactivate guard and prompt to confirm navigation

Question

Is there any way a component can dynamically register the canDeactivate guard for itself? Its mainly to prompt/stop the user from navigating with confirmation like Yes/No.

I'm trying to do this because the application in question is quite large and workflow components (example: payment, transfer, etc) are spread across many different modules in the app. I am not sure if registering them statically in the router config would be a good idea.

I am looking for a way where in the component can prompt and control the navigation similar to guards.

Answer 1

Components cannot register router guards, however the most common canDeactivate implementation rely on a component method to be defined.

A striped down version can be:

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
 canDeactivate(component: CanComponentDeactivate) {
   return component.canDeactivate ? component.canDeactivate() : true;
 }
} 

Basically if a component exposes a canDeactivate method then it will be used to control the deactivation, otherwise the router navigation would just continue.

I would register a similar guard on your top level component, and let single components implement or not the specific method.

Answer 2

Now you can register canDeactivate router guard easily for your component. Just be sured it gets own path in a routing and then use this way to add a guard:

this.activatedRoute.routeConfig!.canDeactivate = [...your guards];

ActivatedRoute you can get through DI either by constructor or inject function.