时间戳

首页 > 解决方案 > Angular 6 - Bootstrap - 如何捕获模态对话框关闭事件？

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

问题描述

我想捕获引导模式对话框的关闭事件来做一些工作，但不知道该怎么做。我的第一个想法是将事件绑定到按钮，但它有点无效，因为在对话框外部单击时可以关闭对话框。我已经搜索并收集了一些解决方案，但有些不起作用或与 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>

标签： angularbootstrap-modal

解决方案

我认为这样做的主要思想如下：

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

推荐阅读