Header Ads Widget

Ticker

6/recent/ticker-posts

Angular 10 CanDeactivate

 En este artículo, aprenderemos sobre la CanDeactivateprotección de ruta, que es un evento de navegador que se usa para avisar o advertir a los usuarios que están a punto de abandonar una página o, en nuestro caso, la aplicación Angular 10.

Puede usar la protección CanDeactivate para evitar que los usuarios abandonen accidentalmente una ruta / página en su aplicación, por ejemplo, si dicha página contiene un editor de texto con cambios no guardados o un formulario no enviado. Puede informar al usuario que aún no puede abandonar el componente mediante una confirmación o alerta antes de que se lleve a cabo la navegación a la otra ruta utilizando el protector de ruta Angular CanDeactivate.

A lo largo de este artículo, verá cómo usar el protector Angular CanDeactivate por ejemplo. CanDeactivate es una interfaz TypeScript que debe ser implementada por un componente para crear una protección de ruta. El enrutador utilizará esta protección para decidir si la ruta se puede desactivar. Se puede implementar en cualquier componente Angular usando el canDeactivatemétodo de la interfaz.

Veamos cómo implementar CanDeactivate paso a paso con Angular 10.

La interfaz Angular CanDeactivate

Según los documentos :

Interfaz que una clase puede implementar para ser un guardia que decide si una ruta se puede desactivar. Si todos los guardias vuelven verdaderos, la navegación continúa. Si algún guardia devuelve falso, se cancela la navegación. Si algún guardia devuelve un UrlTree, la navegación actual se cancela y comienza una nueva navegación hacia el UrlTree devuelto por el guardia.

Esta es la declaración de la interfaz:

interface CanDeactivate<T> {
  canDeactivate(component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
}

La CanDeactivateinterfaz es una protección de ruta que puede utilizar el enrutador para decidir si una ruta se puede desactivar.

La interfaz CanDeactivate proporciona un canDeactivatemétodo que toma los siguientes argumentos:

  • El componente que estará protegido.
  • ActivatedRouteSnapshot
  • RouterStateSnapshot
  • RouterStateSnapshot

El canDeactivatemétodo devuelve un Observable<boolean | UrlTree>Promise<boolean | UrlTree>UrlTreeboolean.

Paso 1: creación del servicio de protección de ruta CanDeactivate

Antes de implementar la CanDeactivateprotección de ruta en nuestra aplicación Angular 10, necesitaremos crear una protección como servicio, es decir, una clase decorada con el @Injectable()decorador y debe anular el canDeactivate()método.

A continuación, en nuestro componente Angular también necesitamos implementar el canDeactivate()método si queremos proteger la ruta del componente usando CanDeactivate.

Regrese a su terminal, asegúrese de estar dentro de la carpeta de su proyecto Angular 10 y ejecute el siguiente comando para generar un nuevo servicio:

$ ng generate service can-deactivate-guard

A continuación, debe importar la CanDeactivateinterfaz de @angular/routeren su can-deactivate-guardservicio.

Abra el src/app/can-deactivate-guard.service.tsarchivo y actualícelo de la siguiente manera:

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

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

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {

  canDeactivate(component: CanComponentDeactivate, 
  route: ActivatedRouteSnapshot, 
  state: RouterStateSnapshot) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }

}

Simplemente implementamos la CanDeactivateinterfaz con un tipo de componente genérico que define un canDeactivatemétodo. La CanDeactivateinterfaz contiene un canDeactivate()método que debe anular y pasar el componente genérico como parámetro para que podamos llamar al canDeactivatemétodo del componente.

Paso 2: Registre el servicio CanDeactivate Guard en el módulo de enrutamiento de aplicaciones

A continuación, necesitamos importar nuestro servicio de guardia CanDeactivate y agregarlo a la providersmatriz del módulo de enrutamiento.

Abra el src/app/app-routing.module.tsarchivo y agréguelo CanDeactivateGuardal módulo de la siguiente manera:

import { CanDeactivateGuard } from './can-deactivate-guard.service';
//[...]

@NgModule({
  //[...]
  providers: [ 
    CanDeactivateGuard
  ]
})
export class AppRoutingModule { } 

Paso 3: implemente el canDeactivate()método en su componente

A continuación, necesitamos implementar el canDeactivate()método en nuestro componente, así que primero creemos el componente.

Regrese a su terminal y ejecute el siguiente comando:

$ ng generate component product

A continuación, abra el src/app/product/product.component.tsarchivo y actualícelo de la siguiente manera:

// [...]
import { Observable } from 'rxjs';

@Component({
  templateUrl: './product.component.html' 
}) 
export class ProductComponent implements OnInit { 

  unSaved: boolean = true;        
    constructor() { }

    canDeactivate(): Observable<boolean> | boolean {


        if (this.unSaved) {

          const result = window.confirm('There are unsaved changes! Are you sure?');

           return Observable.of(result);
        }
        return true;
    }   
} 

El servicio canDeactivate()invocará el método del componente CanDeactivateGuardpara confirmar si el usuario desea salir cuando está a punto de abandonar el componente.

Simplemente agregamos una unSavedvariable para indicar que tenemos algunos cambios no guardados en nuestro componente que necesitamos guardar antes de salir o de lo contrario los cambios se perderán.

Paso 4: agregar el CanDeactivateprotector a la configuración de la ruta

Finalmente, necesitamos agregar nuestro CanDeactivateguardia a la ruta del componente correspondiente en el módulo de enrutamiento usando la canDeactivatepropiedad.

Abra el src/app/app-routing.module.tsarchivo e importe y luego agregue el CanDeactivateGuardsiguiente:

const routes: Routes = [
  { 
         path: 'product',
         component: ProductComponent,
         canDeactivate: [CanDeactivateGuard]
  }  
];

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

Conclusión

Hemos creado una aplicación Anguar 10 que muestra cómo usar la CanDeactivateinterfaz para crear un servicio de guardia de ruta para proteger un componente de la salida accidental del usuario.

Publicar un comentario

0 Comentarios