Angular 6 - Bootstrap - 如何捕获模态对话框关闭事件？答案

【问题标题】：Angular 6 - Bootstrap - How to capture modal dialog close event?Angular 6 - Bootstrap - 如何捕获模态对话框关闭事件？
【发布时间】：2018-09-21 04:15:25
【问题描述】：

我想捕获引导模式对话框的关闭事件来做一些工作，但不知道该怎么做。我的第一个想法是将事件绑定到按钮，但它有点无效，因为在对话框外部单击时可以关闭对话框。我已经搜索并收集了一些解决方案，但有些不起作用或与 Angular 6 无关。希望这里有人知道该怎么做。非常感谢！

这是我的模态：

<div class="modal fade" id="listNamecardShare" tabindex="-1" role="dialog" aria-labelledby="listNamecardShareTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="listNamecardShareTitle">Select namecards to share</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      <div class="modal-body">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>Fullname</th>
              <th>Company</th>
              <th>Select</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of namecards">
              <td>{{ item.fullname }}</td>
              <td>{{ item.company }}</td>
              <td><input type="checkbox" [(ngModel)]="selected[namecards.indexOf(item)]"></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary fas fa-paper-plane" data-dismiss="modal" (click)="onClickSend()">&nbsp;Send</button>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

是否需要关闭外部点击时的模态...？
您使用的是哪个引导库？引导程序？ ngxbootstrap ?
Bootstrap 应该有类似 hidden.bs.modal 这样的关闭事件，您可以在其中连接 RxJS fromEvent 并能够订阅该事件
@Stavm 我正在使用从 npm 安装的引导程序 4。可能是 ngbootstrap :)
通过使用backdrop: "static"，您可以防止在点击外部时关闭模态框。更多信息 - w3schools.com/bootstrap/… 和 - w3schools.com/bootstrap/…

标签： angular bootstrap-modal

【解决方案1】：

我认为主要思想如下：

fromEvent(htmlElemRef.nativeElement, "shown.bs.modal").subscribe( () => {
    console.warn("\tModal is now visible");
});

其中htmlElemRef 是组件的属性之一，定义如下：

ts：

@ViewChild("htmlElemRef", {static: false}) htmlElemRef: ElementRef<HTMLDivElement>;

html:

<div #htmlElemRef class="modal fade" id="listNamecardShare" tabindex="-1" role="dialog" aria-labelledby="listNamecardShareTitle" aria-hidden="true">

但是在我写这些行的时候，我仍然没有使用fromEvent（当我发现时会编辑），所以我正在使用以下 jQuery 解决方法：

$(htmlElemRef.nativeElement).on("shown.bs.modal", () => {
    console.warn("\tModal is now visible");
});

【讨论】：