Angular 6: CanDeactivate
Dando continuidade aos meus artigos sobre Route Guards, hoje irei apresentar como utilizar o CanDeactivate.
Caso tenha interesse em ler os primeiros artigo, segue o link de cada um deles abaixo:
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: 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 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 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-editO 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:
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:
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.
