[Angular2 Router] CanDeactivate Route Guard - How To Confirm If The User Wants To Exit A Route

import {
  Component,
  OnInit,
  OnDestroy,
  ViewChild,
} from ‘@angular/core‘;
import {ActivatedRoute, Router} from "@angular/router";
import {StarWarsService} from "../heros.service";
import {Observable, Subscription} from "rxjs";

@Component({
  selector: ‘app-hero‘,
  templateUrl: ‘hero.component.html‘,
  styleUrls: [‘hero.component.css‘]
})
export class HeroComponent implements OnInit, OnDestroy {

  @ViewChild(‘inpRef‘) input;

  heroId: number;
  hero: Observable<any>;
  description: string;
  querySub: Subscription;
  editing: boolean = false;

  constructor(private route: ActivatedRoute,
              private router: Router,
              private starwarService: StarWarsService) {
  }

  ngOnInit() {
    this.hero = this.route.params
     .map((p:any) => {
      this.editing = false;
      this.heroId = p.id;
      return p.id;
     })
     .switchMap( id => this.starwarService.getPersonDetail(id));


   /* // since herocomponent get init everytime, it would be better to use snapshot for proferemence
    this.heroId = this.route.snapshot.params[‘id‘];
    this.hero = this.starwarService.getPersonDetail(this.heroId);*/

    this.querySub = this.route.queryParams.subscribe(
      param => this.description = param[‘description‘]
    );

    console.log("observers", this.route.queryParams[‘observers‘].length)
  }

  ngOnDestroy() {
    this.querySub.unsubscribe()
  }

  saveHero(newName){
    this.editing = true;
    console.log("editing", this.editing)
  }

  prev(){
    return Number(this.heroId) - 1;
  }

  next(){
    return Number(this.heroId) + 1;
  }
}

<div>
  <h2>{{description}}: {{(hero | async)?.name}}</h2>
  <div>
    <a [routerLink]="[‘/heros‘, prev()]">Previous</a>
    <a [routerLink]="[‘/heros‘, next()]">Next</a>
  </div>
  <div>
    <input type="text" #inpRef (keyup.enter)="saveHero(inpRef.value)">
  </div>
  <br>
  <img src="{{(hero | async)?.image}}" alt="">
  <div>
    <a [routerLink]="[‘/heros‘]">Back</a>
  </div>
</div>

import {CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router";
import {Observable} from "rxjs";
import {HeroComponent} from "./hero/hero.component";
export class CanHeroDeactivate implements CanDeactivate<HeroComponent>{
  canDeactivate(component: HeroComponent,
                route: ActivatedRouteSnapshot,
                state: RouterStateSnapshot): Observable<boolean>|boolean {

    if(!component.editing){
      return true;
    }

    return confirm(‘You have unsaved message, are you sure to leave the page?‘)
  }

}

import {HerosComponent} from "./heros.component";
import {RouterModule} from "@angular/router";
import {HeroComponent} from "./hero/hero.component";
import {CanHeroDeactivate} from "./CanDeactiveHero.directive";
const routes = [
  {path: ‘‘, component: HerosComponent},
  {path: ‘:id‘, component: HeroComponent, canDeactivate: [CanHeroDeactivate]},
];
export default RouterModule.forChild(routes)

import { NgModule } from ‘@angular/core‘;
import { CommonModule } from ‘@angular/common‘;
import { HerosComponent } from ‘./heros.component‘;
import herosRoutes from ‘./heros.routes‘;
import {HeroComponent} from "./hero/hero.component";
import {StarWarsService} from "./heros.service";
import {RouterModule} from "@angular/router";
import {CanHeroDeactivate} from "./CanDeactiveHero.directive";

@NgModule({
  imports: [
    CommonModule,
    herosRoutes
  ],
  declarations: [HerosComponent, HeroComponent],
  providers: [StarWarsService, CanHeroDeactivate]
})
export default class HerosModule { }