Sự kiện phương thức trước khi ẩn

Question

Tôi gặp sự cố. Tôi cần hiển thị toastr thông báo rằng những thay đổi không được lưu khi ai đó muốn ẩn phương thức. Tôi cần phải kích hoạt toastr trước khi modal ẩn, và khi người dùng cố gắng một lần nữa để loại bỏ phương thức cho phép điều này. Tôi cố gắng một cái gì đó như thế này:

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); 
} 

} 

và nó hoạt động tốt cho lần đầu tiên, sau sự kiện hide này dường như được overwriten và chức năng $('#triggerModal').on('hide.bs.modal',() => { không kích hoạt được nữa.

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

Bạn có thể làm điều đó với các ng-bootstrap Modal component, bằng cách gán một phương pháp để beforeDismiss option của nó, như minh họa trong 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)}`; 
    }); 
    } 
    ... 
}