在click事件之外访问ngx引导模式

Question

我在应用程序组件的ng模板中调用ngx引导模式。我已经在stackBlitz示例中构建了我当前的设置

正如你所看到的，我在模式取消/关闭按钮中添加了另一个事件——当点击这些按钮时，两个事件就会触发。一个用于关闭模态，另一个用于执行"关闭"；其他东西"；。

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

所以我需要能够"；访问"；对background事件应用函数-没有html句柄可以实现这一点。

StackBlitz示例

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>

组件.ts

openModal(printTemplate: TemplateRef<any>) {
this.modalRef = this.modalService.show(printTemplate);
}
cancel() {
this.modalRef.hide();
}
anotherFunc() {
console.log("func triggered");
}

Answer 1

要实现您的要求，您可以阅读事件背景，在显示模态后单击background。这是一把工作叉。

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上进行了测试，在以下版本中打字似乎已损坏，但可能可以通过更改打字进行修复。