Ejemplo canDeactivate con Guard automático

add-phone-number-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DeactivatableGuard } from './deactivatable.guard';

import { AddPhoneNumberPage } from './add-phone-number.page';

const routes: Routes = [
  {
    path: '',
    component: AddPhoneNumberPage,
    canDeactivate: [DeactivatableGuard], 
    // Debe usarse en el routing del componente/página directo, no en el routing padre (lazy-load)
  },
  
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class AddPhoneNumberPageRoutingModule {}

add-phone-number.page.ts

import { Component } from '@angular/core';

import { IDeactivatablePage } from './deactivatable-page';

@Component({
  selector: 'app-settings-add-phone-number-page',
  templateUrl: './add-phone-number.page.html',
  styleUrls: ['./add-phone-number.page.scss'],
})
export class AddPhoneNumberPage implements IDeactivatablePage {
  public submitting = false;
  public isDirty = false;

  public constructor() {    
  }

  async showSkipAlert(): Promise<boolean> {
    // Preguntar si el usuario quiere descartar los cambios
  }


  public async canExit(
    _currentRoute?: ActivatedRouteSnapshot,
    _currentState?: RouterStateSnapshot,
    _nextState?: RouterStateSnapshot
  ): Promise<boolean | UrlTree> {
    if (this.submitting) {
      return false;
    }

    if (this.isDirty) {
      return await showSkipAlert()
    }

    return true;
  }
}

deactivatable-page.ts

import {
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  UrlTree,
} from '@angular/router';

/**
 * Expone un método para determinar si se puede salir de la página, necesario para aplicar el guard DeactivatablePageGuard a una página.
 *
 * Para ser implementado en un componente de página.
 *
 * @author Nelson Martell <[email protected]>
 */
export interface IDeactivatablePage {
  /**
   * Indica si se puede o no salir de la página, o si se debe redirigir.
   */
  canExit(
    currentRoute?: ActivatedRouteSnapshot,
    currentState?: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ): Promise<boolean | UrlTree>;
}

deactivatable.guard.ts

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

import { IDeactivatablePage } from './deactivatable-page';

/**
 * Usa la interfaz IDeactivatablePage, implementada en una página para determinar si se puede o no salir de la página.
 *
 * @author Nelson Martell <[email protected]>
 */
@Injectable({
  providedIn: 'root',
})
export class DeactivatablePageGuard
  implements CanDeactivate<IDeactivatablePage>
{
  async canDeactivate(
    component: IDeactivatablePage,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ): Promise<boolean | UrlTree> {
    return await component.canExit(currentRoute, currentState, nextState);
  }
}

@carlosb24