Blocking page navigation in Angular with scale
Shlomi Assaf

Very nice solution!!! I love this!!

I didn’t know about this activated event in the router.

Some minor comments:

  1. I would check if the component implements the function before pushing it to the list. And not when the unload event happens, better that components list will be only rellevant components, And not all the router activated components. (BTW, why is it a list? I think in any time router has only one activated component, can’t you ise just single component reference?)
  2. Most cases you will want to block user when he is filling a form. And in most forms the logic will be the same: is form dirty and not submitted… so why not giving some general solution, Like I suggested in my article? Remember DRY?
  3. When you have an abstract class for any component that want to block the user… you can check in the if statement what is the type of the component. This is safer then checking if it has function with such name. Use TS capabilities.