Angular 6: Route Guards – Parte 02

Dando continuidade ao meu artigo anterior: Angular 6: Route Guards, hoje eu vou mostrar como utilizar o CanDeactivate.

O CanDeactivate deve ser utilizado nos cenários onde precisamos verificar se o usuário pode desativar uma rota (ir para uma outra rota). Imagine o seguinte exemplo: o seu usuário está preenchendo um formulário, e antes de salvar, ele tenta ir para uma outra rota; com o canDeactivate você pode interceptar e enviar uma mensagem para o seu usuário, solicitando que ele confirme se realmente deseja realizar essa operação.

Para os próximos passos eu irei utilizar o projeto iniciado no meu artigo anterior. Caso tenha interesse em clonar ele, segue o seu link no GitHub: Angular 6 Guards.

Abra esse projeto no seu editor de textos, em seguida execute o comando abaixo no seu terminal:

ng g s guards/productsdeactivate
ng g c products/product-edit

O passo anterior deve criar um serviço chamado ProductsdeactivateService e um componente chamado ProductEditComponent. Adicione esse novo componente nas suas rotas, em seguida abra o arquivo productsdeactivate.service.ts e atualize ele com o trecho de código abaixo:

import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { ProductEditComponent } from '../products/product-edit/product-edit.component';

@Injectable({
  providedIn: 'root'
})
export class ProductsdeactivateService implements CanDeactivate<ProductEditComponent> {

  canDeactivate(
    component: ProductEditComponent,
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean {
    console.log(route)
    return window.confirm("Tem certeza que deseja sair dessa página?");
  }
}

Não esqueça de adicionar esse serviço nos providers do ProductsModule.

providers: [ProductsdeactivateService]

Agora adicione o CandDeactivate na sua rota edit, conforme no trecho de código abaixo:

{ path: 'product-edit/:id', component: ProductEditComponent, canDeactivate: [ProductsdeactivateService] },

Em seguida, atualize o arquivo app.component.html com o seguinte trecho de código:

<button routerLink="/login">Login</button>
<button routerLink="/home">Home</button>
<button routerLink="/products">products</button>
<button routerLink="/products/product-edit/13">products-edit</button>

<router-outlet></router-outlet>

Testando

Para testar, execute o comando ng serve, e em seguida abra no seu navegador o endereço: http://localhost:4200/.

Abaixo você tem uma imagem demonstrando esse passo:

Bem simples, né?

Dessa forma você consegue notificar o seu usuário antes que ele saia de uma determinada rota.

Bom, espero que tenham gostado e até um próximo artigo, pessoal!