模态弹窗在隐藏前的事件

Question

我有一个问题。我需要展示toastr消息，告知用户更改未保存，当用户想要隐藏模态框时。我需要在模态框隐藏之前触发toastr，当用户再次尝试关闭模态框时允许关闭。我尝试了以下代码：

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

}

对于第一次使用，它能正常工作，但在此之后，hide事件似乎被覆盖了，导致函数$('#triggerModal').on('hide.bs.modal', () => {不再触发。

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>

- Witold Tkaczyk

---

请展示受影响的HTML代码部分以及您是如何显示模态框的，是使用Angular模式还是jQuery模式。 - Daniel Segura Pérez

@DanielSeguraPérez 完成了，希望很清楚。 - Witold Tkaczyk

Answer 1

你可以使用ng-bootstrap Modal组件来完成此操作，将一个方法分配给其beforeDismiss选项，如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)}`;
    });
  }
  ...
}

- ConnorsFan