Saltar al contenido

Angular guardia CanDeactivate tutorialJul, 12thIn este tutorial, vamos a aprender sobre la forma de utilizar el canDeactivate …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo utilizar el guardia canDeactivate en un router angular.

CanDeactivate guardia

CanDeactivate guardia se utiliza para notificar a los usuarios si accidentalmente el cierre de la página en medio de los datos de relleno para el envío de formularios ejemplo.

Veamos un ejemplo.

En primer lugar, necesitamos un crear un nuevo archivo denominado can-deactivate.guard.ts dentro de la carpeta de aplicaciones y añadir el siguiente código de.

import { CanDeactivate } from '@angular/router';import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';

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

@Injectable({
providedIn: 'root',
})

export class CanDeactivateGuard implements
CanDeactivate {

canDeactivate(component: CanComponentDeactivate) { return component.canDeactivate && component.canDeactivate(); }}

En el código anterior, primero se importó CanDeactivate del paquete ‘@ angular / router y hemos creado una interfaz CanComponentDeactivate. Dentro clase

CanDeactivateGuard hemos añadido un método canDeactivate que recibe un componente como un argumento que contiene método canDeactivate.

Nota: Si utilizamos CanDeactivateGuard para la ruta particular el mismo componente de enrutamiento recibe de argumento para el método canDeactivate.

Uso de la alerta CanDeactivate

dentro de su gama appRoutes tiene que elegir qué rutas necesita guardia CanDeactivate.

const appRoutes: Routes = [
{ path: 'contact',
component: ContactComponent,
canDeactivate: [CanDeactivateGuard] },];

Ahora, hemos elegido debería necesitar ContactComponent CanDeactivateGuard de manera que es necesario un método create canDeactivate dentro de nuestro ContactComponent. Método




import { Component } from '@angular/core';
import { Observable } from 'rxjs';import { CanComponentDeactivate } from '../can-deactivate.guard';
@Component({
selector: 'app-contact',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.css']
})

export class ContactComponent implements CanComponentDeactivate {
user = {
name: '',
email: ''
};

saved = false;

onSubmit() {
console.log(this.user.name, this.user.email);
this.saved = true;
}
canDeactivate(): Observable | Promise | boolean { if ((this.user.name.length > 0 || this.user.email.length > 0) && !this.saved) { return confirm('Your changes are unsaved!! Do you like to exit'); } return true; }
}

Si canDeactivate retorno cierto que el usuario se le permite salir de esta ruta lo demás se notifica al usuario Como en el código anterior nos marchábamos ya que si el usuario está lleno nombre o correo electrónico a continuación, le notificamos mediante el uso de un diálogo de confirmación .

Tiene ve en la imagen de arriba, donde he entrado en nombre de Sai y haga clic en Inicio de diálogo de confirmación a continuación, se muestra con un mensaje ( ‘Sus cambios son sin guardar !! Qué le gusta de salida’) si se hace clic en bien que se les permite salir de esta ruta más si hacemos clic sobre cancelar nos quedamos en esta ruta. repositorio

Código