Modalne wydarzenie przed ukryciem

Question

Mam problem. Muszę pokazać toastr informując, że zmiany nie są zapisywane, gdy ktoś chce ukryć modal. Muszę wyzwolić toastr przed modalnym hide, a gdy użytkownik spróbuje ponownie odrzucić modal, pozwól na to. Próbowałem coś takiego:

declare let jQuery: any; 
declare let $: any; 
declare let toastr: any; 

@Component({ 
    selector: 'app-trigger', 
    templateUrl: './trigger.component.html', 
    styleUrls: ['./trigger.component.scss'] 
}) 
export class TriggerComponent implements OnInit { 

    name: string 

    private canHideModal = true; 

    constructor() { 
    } 


ngOnInit(){ 
     const self = this; 
     $('#triggerModal').on('hide.bs.modal',() => { 
     if (self.canHideModal) { 
      //hide modal here <--------- 
     } else { 
      toastr['warning']('You have unsaved changes'); 

      self.canHideModal = true; 
      return false 
     } 
     }); 
    } 

fireModal(changes : {action:string, name:string}){ 
    changes.action = 'show'; 
    changes.name = 'test'; 
    this.name = changes.name 
    $('#triggerModal').modal(changes.action); 
} 

} 

i działa prawidłowo po raz pierwszy, po tym hide wydarzenie wydaje się być funkcja $('#triggerModal').on('hide.bs.modal',() => { overwriten i nie wywołuje już.

HTML:

<div class="modal fade" id="triggerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true"> 
    <div class="modal-dialog modal-lg px-4" role="document"> 

     <!--Content--> 
     <div class="modal-content"> 

      <!--Header--> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
         <span aria-hidden="true">×</span> 
        </button> 
      </div> 

      <!--Body--> 
      <div class="modal-body mb-0"> 

       <!--Grid row--> 
       <div class="row d-flex justify-content-center mb-4"> 

        <!--Grid column--> 
        <div class="col-md-6"> 

         <!--Name--> 
         <div class="md-form"> 
          <input type="text" id="triggerStartName" (input)="canHideModal = false" class="form-control" #triggerName [value]="name"> 
          <label for="triggerStartName" [ngClass]="{ 'active': name }">Trigger name</label> 
         </div> 

        </div> 
        <!--Grid column--> 

       </div> 
       <!--Grid row--> 

      </div> 

      <!--Footer--> 
      <div class="modal-footer justify-content-center"> 
       <button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal">Close</button> 
      </div> 

     </div> 
     <!--/.Content--> 

    </div> 
</div> 

Answer 1

Można to zrobić z ng-bootstrap Modal component przez przypisanie metody do jego beforeDismiss option, jak pokazano na this plunker:

import {Component} from '@angular/core'; 

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap'; 

@Component({ 
    selector: 'ngbd-modal-basic', 
    templateUrl: 'src/modal-basic.html' 
}) 
export class NgbdModalBasic { 
    closeResult: string; 
    private canHideModal = false; 

    constructor(private modalService: NgbModal) {} 

    open(content) { 
    this.canHideModal = false; 
    const options : NgbModalOptions = { 
     beforeDismiss:() => { 
     if (this.canHideModal) { 
      return true; 
     } else { 
      alert('You have unsaved changes'); 
      this.canHideModal = true; 
      return false; 
     } 
     } 
    };  
    this.modalService.open(content, options).result.then((result) => { 
     this.closeResult = `Closed with: ${result}`; 
    }, (reason) => { 
     this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; 
    }); 
    } 
    ... 
}