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

Question

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