以角度方式调用引导模式关闭上的函数（通过转义按钮和任何其他方式）

Question

我正在使用 Angular。我有 Bootstrap 模式弹出窗口。我在函数关闭时调用了它。但问题是还有其他方法可以关闭，例如按退出按钮或只需单击屏幕。我不知道当发生逃逸等事件时如何调用相同的函数？我用谷歌搜索了 stackoverflow，但找不到合适的解决方案。

堆栈闪电战

Answer 1

您可以在

hide.bs.modal

事件上添加偶数侦听器。 当 hide 实例方法被调用时，这甚至会立即触发。您可以在docs

中查看更多详细信息

Answer 2

您可以使用模态元素的

blur

事件。并且

onBlur

做任何你想做的事。

Answer 3

我使用 Angular Bootstrap 遇到了同样的问题。我通过引用 Modal with options 文档为我的模态创建了初始代码。

NgbModalOptions 有一个

beforeDismiss

选项，您可以使用它来传递将在模式关闭之前运行的回调函数。我用它来在模式关闭之前清除数据：

// my-component.component.html

<ng-template #modalTemplate let-modal>
  ...
</ng-template>

<button
  type="button"
  (click)="openModal(modalTemplate)"
>
  Open Modal
</button>

// my-component.component.ts

openDialog(modalTemplate) {
  this.modalService.open(modalTemplate, { size: 'lg', beforeDismiss: () => {
      this.clearModalData();
      return true;
    },
  });
}

希望有帮助！我在工作中使用 Angular，但如果您正在寻找一个简单的 JavaScript 框架，既不妨碍您工作，又能让您提高工作效率，那么我可以建议您使用 Svelte.js （特别是 SvelteKit 框架）。太棒了！祝你好运！