Question

我想捕获引导程序模式对话框的close事件来执行一些工作，但是不知道如何执行此操作。我首先想到的是将事件绑定到按钮，但是这样做有点无效，因为单击对话框外部时可以关闭对话框。我已经搜索并收集了一些解决方案，但有些解决方案无效或与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>

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

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

1 个答案: