挂钩引导4个模态显示/隐藏来自Typescript的事件

Question

有一个带有id的模态myModal我试图在它显示和关闭时挂钩事件.根据https://v4-alpha.getbootstrap.com/components/modal/#events的文档,我已将以下内容添加到我的模态组件中:

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

现在的事件处理程序只会调试console.log"显示"或"隐藏"以进行测试,但不幸的是我无法让它工作:

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

有什么东西缺失,有可能实现吗？

Answer 1

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

@ViewChild('yourModal')
yourModal: ModalComponent;

我建议你订阅那些活动 ngAfterViewInit

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

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