Angular 8 Cancel or do something before navigation starts

Question

I have a scenario where I have a route

<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>

in the controller I would like to cancel the rout navigation based on a value.

export class HeroListComponent implements OnInit {
 cancelRoute : boolean = true

  constructor(
   //some logic where before the route is navigated to, I want it to cancel the route
   // and log a message to console
   //console.log('successfully, canceled route');
  ) {}

EDIT

I do not want this done through a Route Guard, i want this done at the component level. I have a component on the page, that I want to cancel route navigation.

here is my use case.

I have a page which hosts multiple components, If someone leaves the page I want to check with component A and make sure there isnt any unsaved data before they navigate away.

EDIT 2

"I do not want this done through a Route Guard". Why? This is essentially what the CanDeactivate guard exists for. You can definitely use it for your use case with ease.

Correct me If I am wrong, but I would need to put the CanDeactivateGuard On every route for example

RouterModule.forRoot([
  {
    path: 'team/:id',
    component: TeamComponent,
    canDeactivate: ['canDeactivateTeam']
  }

I do not want to have a CanDeactivate on every route, when Only 1 route have foo component inside.

There are many routes, only one route needs foo component and he need to can cancel the route navigation. As far as I know the canDeactivate route gaurd cannot access components created on a route.

EDIT 3

NavigationStart The docs state that this is an event that is fired. I can hook into that event, but I cannot stop the actually navigation. Unless I am wrong NavigatonStart just tells me when it starts navigating not how to stop the navigation.

Answer 1

Edit based on the comment below: One possible solution would be the following: Change X.component.html to:

<a (click)='goToCrisisCenter()' routerLinkActive="active">Crisis Center</a>

X.component.ts

constructor(private navigationService: NavigationService) {}

goToCrisisCenter() {
  this.navigationService.tryNavigateTo('/crisis-center');
}

Create NavigationService with:

canNavigate = true;
tryNavigateTo(route:string) {
  if(canNavigate) this.router.navigate([/crisis-center])
}

Inject NavigationService in HeroListComponent and manipulate canNavigate as it suits you.