Comment vérifier la confirmation modale dans ng2-bootstrap

Question

J'ai un petit problème avec le routage de blocage, quand les données dans le formulaire ne sont pas sauvegardées. Dans mon cas j'ai un composant, avec la forme:

some.component.ts

export class SomeComponent { 
    @ViewChild("form") form: NgForm; 
    @ViewChild("exitModal") modal; 
} 

partie de some.component.html (partie modal)

<div bsModal #exitModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-info" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h4 class="modal-title">Warning</h4> 
     <button type="button" class="close" (click)="exitModal.hide()" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     <p>Unsaved data in form will be lost. Are you sure, that you want to leave page? </p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" (click)="exitModal.hide()">No, stay here</button> 
     <button type="button" class="btn btn-primary" (click)="form.reset(); exitModal.hide()">Yes, I want to leave page</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

routage I J'ai ajouté garde, qui ressemble à ce que:

can-deactivate.guard.ts

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

    canDeactivate(
     component: SomeComponent, 
     route: ActivatedRouteSnapshot, 
     state: RouterStateSnapshot 
    ): Promise<boolean> | boolean { 

     if (!component.form.dirty) { 
      return true; 
     } 

     return false; 
    } 
} 

Le routage de blocs fonctionne bien! Si j'essaye d'aller à l'autre page, modal avec l'avertissement montre. Lorsque je clique sur le bouton annuler modal se cache, mais je ne sais pas, comment dois-je passer confirmation à la garde d'aller sur la page sélectionnée par l'utilisateur. Quelques idées?

Je sais que

confirment de retour ('Are u sûr?)

fonctionne, mais je me soucie de style modal par moi.

Answer 1

Nous avons eu la même situation et nous utilisons https://www.npmjs.com/package/ng2-bs3-modal

Voici comment vous l'utilisez dans le composant qui implémente la méthode canDeactivate.

COMPOSANT POUR VOUS PROTÉGER

public canDeactivate(): Promise<boolean> | boolean { 
    return (!this.editing && !this.submitting) 
     || 
     new Promise<boolean>((resolve, reject) => { 
     const subscriptionOnClose: Subscription = this.canDeactivateModal.onClose.subscribe(() => { 
      subscriptionOnClose.unsubscribe() 
      subscriptionOnDismiss.unsubscribe() 
      resolve(true) 
     }) 
     const subscriptionOnDismiss: Subscription = this.canDeactivateModal.onDismiss.subscribe(() => { 
      subscriptionOnClose.unsubscribe() 
      subscriptionOnDismiss.unsubscribe() 
      this.eventSelectorComponentDisabled = false 
      resolve(false) 
     }) 
     this.canDeactivateModal.open() 
     }) 
    } 

GARDE

@Injectable() 
export class CanDeactivateCategoriesGuard implements CanDeactivate<CategoriesComponent> { 

    canDeactivate(
    component: CategoriesComponent, 
    route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot 
): Promise<boolean> | boolean { 
    return component.canDeactivate(); 
    } 
} 

MODAL COMPOSANTE

<modal #modalComponent> 
    <modal-header [show-close]="true"> 
    <h4 class="modal-title"><i class="fa fa-warning"></i> {{title}}</h4> 
    </modal-header> 
    <modal-body> 
    <p *ngFor="let message of messages"> 
     {{message}} 
    </p> 
    </modal-body> 
    <modal-footer> 
    <button class="btn" (click)="modalComponent.dismiss()"> 
     {{dismissButtonText}} 
     </button> 
    <button class="btn btn-primary" (click)="modalComponent.close()"> 
     {{closeButtonText}} 
     </button> 
    </modal-footer> 
</modal>