Angular 6: CanDeactivate

Dando continuidade aos meus artigos sobre Route Guards, hoje mostrarei como utilizar o CanDeactivate. Caso tenha interesse em ler os primeiros artigo, segue o link de cada um deles abaixo:

• Angular 6: Route Guards
• Angular 6: Route Guards — Parte 02

O CanDeactivatedeve ser utilizado em cenários onde precisamos verificar se o usuário pode desativar um rota (ir para uma outra rota) ou não. Imagine o seguinte exemplo: 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 ele, solicitando que 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 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, e 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 seu ProductsModule.

providers: [ProductsdeactivateService]

Agora adicione o CandDeactivate na sua rota edit:

{ 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, 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 sem finalizar alguma ação necessária.

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