1

Estou tendo problema para fazer o Can Deactivate funcionar na minha aplicação. No arquivo formulario.component.html eu tenho o seguinte código:

       <div class="form-group">
        <label for="quoteType">Quote Type</label>
        <select class="form-control" id="quoteType" name="QuoteType" #type (change)="getQuoteType(type.value)">
          <option selected="selected">---</option>
          <option value="New">New</option>
          <option value="Amendment">Amendment</option>
          <option value="Migration">Migration</option>
          <option value="Replacement/Renewal">Replacement/Renewal</option>
        </select>
      </div>

      <div [ngSwitch]="quotetype">
        <div *ngSwitchCase="'New'">
          <app-form-new [quotetype]="quotetype"></app-form-new>
        </div>
        <div *ngSwitchCase="'Amendment'">
          <app-form-amendment [quotetype]="quotetype"></app-form-amendment>
        </div>
        <div *ngSwitchCase="'Migration'">
          <app-form-migration [quotetype]="quotetype"></app-form-migration>
        </div>
        <div *ngSwitchCase="'Replacement/Renewal'">
          <app-form-replacement-renewal [quotetype]="quotetype"></app-form-replacement-renewal>
        </div>
      </div>

Dependendo do que eu selecionar irá renderizar um componente diferente neste template. Neste caso irei selecionar "New"!

Imagem antes de selecionar: inserir a descrição da imagem aqui

Depois de selecionado New: inserir a descrição da imagem aqui

O que desejo é: caso o usuário comece a preencher o formulário e sem querer ou de propósito aperte o botão de voltar para a página anterior, aparece uma mensagem perguntando se ele quer realmente fazer isso.

Eu conseguir fazer em outras páginas desse sistema, mas quando eu vou para esses formulários não dá certo. Abaixo segue o código que fiz até o momento.

new-can-deactivate-guard.service.ts

import { Injectable } from '@angular/core'
import { CanDeactivate } from "@angular/router";
import { FormNewComponent } from './form-new.component'

@Injectable({
    providedIn: 'root'
})
export class FormNewCanDeactivateGuard implements CanDeactivate<FormNewComponent> {
    canDeactivate(component: FormNewComponent): boolean {
        if(component.formNew.dirty) {
            return confirm('Are you sure you want to discard your changes?')
        }

        return true
    }
}

Arquivo de rotas:

export const ROUTES: Routes = [

    { path: '', component: TelaAcessoComponent },

    { path: 'homepage', component: HomepageComponent, children: [
        { path: '', component: QuotesAbertasComponent},
        { path: 'quotes-abertas', component: QuotesAbertasComponent},
        { path: 'quotes-fechadas', component: QuotesFechadasComponent},
        { path: 'quotes-qss', component: QuotesQssComponent},
    ] },

    { 
        path: 'quotes-abertas/:id', 
        component: QuotesAbertasDetalhesComponent,
        canDeactivate: [QuotesAbertasCanDeactivateGuard]
    },

    { 
        path: 'quotes-fechadas/:id', 
        component: QuotesFechadasDetalhesComponent,
        canDeactivate: [QuotesFechadasCanDeactivateGuard]
    },

    {
        path: 'quotes-qss/:id', 
        component: QuotesQssDetailsComponent,
        canDeactivate: [QuotesQssCanDeactivateGuard]
    },

    { path: 'formulario', component: FormularioComponent },

    { 
        path: 'formulario-New', 
        component: FormNewComponent, 
        canDeactivate: [FormNewCanDeactivateGuard]
    },

    { path: 'formulario-Amendment', component: FormAmendmentComponent },
    { path: 'formulario-Migration', component: FormMigrationComponent },
    { path: 'formulario-Renewal/Replacement', component: FormReplacementRenewalComponent },
    { 
        path: 'products/:id', 
        component: ProductsComponent,
        canDeactivate: [ProductsCanDeactivateGuard]
    },
]

Alguém consegue me ajudar a funcionar essa guarda de routas nessa página?

1
  • O único erro aparente é que a rota aparente no browser, está selecionada o formulario que carrega o FormularioComponent . Essa componente não implementa o canDeactivate. Creio que ao acessa a url formulario-New o confirm aparecerá normalmente. 13/02/2019 às 15:10

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .