隐藏前的模态事件答案

【问题标题】：Modal event before hide隐藏前的模态事件
【发布时间】：2018-05-13 05:11:23
【问题描述】：

我有问题。我需要显示 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>

【问题讨论】：

向我们展示受影响的代码的 html 部分，以及您如何展示模态、角度模式或 jQuery 模式。
@DanielSeguraPérez 完成，我希望它清楚

标签： javascript jquery twitter-bootstrap angular bootstrap-modal

【解决方案1】：

您可以使用ng-bootstrap Modal component 来做到这一点，方法是为其beforeDismiss option 分配一个方法，如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)}`;
    });
  }
  ...
}

【讨论】：