捕捉解雇事件 ngx-bootstrap 模式

Question

我正在使用 angular 6 和 ngx-bootstrap 3.0.1

我显示一个模态，当用户在更新表单后尝试关闭模态时，我希望能够显示丢弃/取消确认。

当用户使用我的自定义关闭按钮时我没有问题，但是当他在模式外使用背景单击时我不知道如何调用我的关闭函数。

如何干净地处理背景点击以显示我的确认消息？

Answer 1

在 ngx-bootstrap 文档页面中，您可以轻松找到解决方案：https://valor-software.com/ngx-bootstrap/#/modals#directive-events

要查看正在触发哪些事件，

在你的组件方面，

import { Component, ViewChild } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal';

@Component({
  selector: 'demo-modal-events',
  templateUrl: './events.html',
  styles: [`
    .card {
      margin-bottom: 0.75rem;
      padding: 8px;
    }
  `]
})
export class DemoModalEventsComponent {
  @ViewChild(ModalDirective) modal: ModalDirective;
  messages: string[];

  showModal() {
    this.messages = [];
    this.modal.show();
  }
  handler(type: string, $event: ModalDirective) {
    this.messages.push(
      `event ${type} is fired${$event.dismissReason
        ? ', dismissed by ' + $event.dismissReason
        : ''}`
    );
  }
}

在你的模板方面，

<button type="button" class="btn btn-primary" (click)="showModal()">Open a modal</button>
<br><br>
<pre class="card card-block card-header" *ngFor="let message of messages">{{message}}</pre>

<div class="modal fade" bsModal #modal="bs-modal"
     tabindex="-1" role="dialog" aria-labelledby="dialog-events-name"
     (onShow)="handler('onShow', $event)"
     (onShown)="handler('onShown', $event)"
     (onHide)="handler('onHide', $event)"
     (onHidden)="handler('onHidden', $event)">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 id="dialog-events-name" class="modal-title pull-left">Modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="modal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Just another modal <br>
        Click <b>&times;</b>, press <code>Esc</code> or click on backdrop to close modal.
      </div>
    </div>
  </div>
</div>

更新：

据我了解，您可以这样检查 $event：

if($event.dismissReason == 'backdrop-click')
this.myFunc();