javascript - Angular NgbModal beforeDismiss 不起作用

Question

我想在关闭之前向弹出模式添加一个类，然后等待一段时间再关闭它。查看文档，我似乎可以使用 beforeDismiss 将其存档在NgbModalOptions选项; https://ng-bootstrap.github.io/#/components/modal/examples

但它不起作用。这是我的打开方法；

  open(content) {
    const options : NgbModalOptions = {
      size: 'lg',
      windowClass: 'animated bounceInUp',
      beforeDismiss: () => {
        setTimeout(()=>{
          alert ('Hello!');
        },2000);
        return false;
      }
    };
    this.modalRef = this.modalService.open(content, options).result.then((result) => {
      //this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      //this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
    console.log (this.modalRef);
  }

如果可能的话，我不介意从外面关闭它。例如类似 this.modalRef.close 的东西但这显示错误 modalRef.close is not a function。

更新

这是我的 HTML；

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Save As Site Product Settings</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    {{product.title}}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" (click)="saveProductAs()">Save As Site Product</button>
    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

我发现它不适用于这个 <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>但适用于十字图标。我如何让它在 c('Close click') 上工作？

Answer 1

beforeDismiss 函数在模态关闭之前调用，但不会在模态关闭之前调用(关闭和关闭之间有区别)。

因为模态模板中有以下内容:

<ng-template #content let-c="close" let-d="dismiss">

当“关闭”按钮按下时，您必须调用 d() 而不是 c() 来连接到 beforeDismiss 按钮按下:

<button type="button" class="btn btn-outline-dark" (click)="d('Close click')">Close</button>

参见 this Plunker用于演示。