javascript - 在点击事件之外访问 ngx-bootstrap 模态

Question

我调用 ngx-bootstraps modal从我的应用程序组件中的 ng-template 中。我在 stackBlitz example 中构建了我当前的设置

如您所见，我向模式取消/关闭按钮添加了另一个事件 - 单击这些按钮时会触发两个事件。一个用于关闭模式，另一个用于执行“其他操作”。

我希望能够将这个“其他东西”应用于在模态外部单击时触发的“背景”事件。默认情况下，单击背景时模式关闭 (this.modalRef.hide();)。有删除关闭行为的配置 (ignoreBackdropClick) 但这不是我想要的。我希望能够保持默认行为并添加另一个功能，就像模态上的其他触发器一样。

所以我需要能够“访问”背景事件以对其应用函数 - 没有我可以执行此操作的 html 句柄。

StackBlitz example

component.html

<ng-template #printTemplate>
    <div class="modal-header">
        <h4>Title</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="cancel(); anotherFunc()">
            <span aria-hidden="true" class="red">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <app-some></app-some>
    </div>
    <div class="modal-footer d-block">
        <button class="btn btn-secondary float-right mr-4" (click)="cancel(); anotherFunc()">Cancel</button>
    </div>
</ng-template>

component.ts

  openModal(printTemplate: TemplateRef<any>) {
    this.modalRef = this.modalService.show(printTemplate);
  }

  cancel() {
    this.modalRef.hide();
  }

  anotherFunc() {
    console.log("func triggered");
  }

Answer 1

要实现您的要求，您可以阅读事件 backdrop-click一旦模态显示，你点击背景。这是一个有效的 fork .

config = {
  backdrop: true,
  ignoreBackdropClick: false
};

openModal(printTemplate: TemplateRef<any>) {
  this.modalRef = this.modalService.show(printTemplate, this.config);
  this.modalRef.onHide.subscribe((reason: string | any) => {
    if(reason === 'backdrop-click') {
      this.myFunc(); // run your function here
    }
  });
};

注意:在 ngx-bootstrap 6.1.0 上测试，打字似乎在版本以下损坏，但可能可以通过更改打字来修复。