可以从Typescript引导4模态显示/隐藏事件 [英] Hook to bootstrap 4 modal show / hide events from Typescript

问题描述

具有ID为 myModal 的模式，我正在尝试显示和关闭事件.遵循 https://v4-alpha.getbootstrap.com/components/modal/#events 我已经在我的模式组件中添加了以下内容:

Having a modal with id myModal I'm trying to hook up to events when it shows and closes. Following the documentation of https://v4-alpha.getbootstrap.com/components/modal/#events I have added the following to my modal component:

this.modalElement = document.getElementById("myModal");
this.modalElement.addEventListener("hidden.bs.modal", this.onModalHidden);
this.modalElement.addEventListener("shown.bs.modal", this.onModalShown);

目前，事件处理程序将仅对console.log显示"或隐藏"进行测试，但不幸的是，我无法使其正常工作:

The event handlers for now will only console.log "shown" or "hidden" to test but unfortunately I can't get it to work:

private onModalShown = (event) => {
    console.log("modal is shown!!!");
}

是否缺少某些东西，有可能实现吗?

Is there something missing and is it possible to achieve that?

推荐答案

您可以在ModalComponent中订阅 onOpen 和 onDismiss 事件.

You can subscribe to onOpen and onDismiss events in ModalComponent.

@ViewChild('yourModal')
yourModal: ModalComponent;

我建议您在 ngAfterViewInit

ngAfterViewInit() {
 this.yourModal.onOpen.subscribe(() => {
   //do something
 });

 this.yourModal.onDismiss.subscribe(() => {
   //do something
 });
}

这篇关于可以从Typescript引导4模态显示/隐藏事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！