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不是函数。

更新

这是我的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">

当＆＃34;关闭＆＃34;时，您必须拨打d()而不是c()来挂接beforeDismiss按钮。按下按钮：

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

请参阅this Plunker了解演示。

Angular NgbModal beforeDismiss不起作用

更新

1 个答案: