Angular NgbModal beforeDismiss 不工作

Question

我想在弹出模式关闭前添加一个class，然后等待一段时间再关闭。查看文档，我似乎可以在 NgbModalOptions 选项中使用 beforeDismiss 将其存档； 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">

当按下 "Close" 按钮时，您必须调用 d() 而不是 c() 来连接到 beforeDismiss 按钮：

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

有关演示，请参阅 this Plunker。

Angular NgbModal beforeDismiss 不工作

Angular NgbModal beforeDismiss not working

javascript

bootstrap-4

ng-bootstrap

angular

更新