Question

拥有身份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＆＃34;显示＆＃34;或者＆＃34;隐藏＆＃34;测试，但不幸的是我不能让它工作：

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

是否有遗漏的东西，是否有可能实现这一目标？

Answer 1

您可以在ModalComponent中订阅onDismiss和@ViewChild('yourModal') yourModal: ModalComponent;事件。

ngAfterViewInit

我建议您订阅ngAfterViewInit() { this.yourModal.onOpen.subscribe(() => { //do something }); this.yourModal.onDismiss.subscribe(() => { //do something }); }

中的那些活动

.htaccess

Answer 2

您可以尝试以下代码段：

首先，我使用ViewChild指令来调用我的模态。

    @ViewChild('MyModal') mymodal: ElementRef;

    //show
    $(this.mymodal.nativeElement).modal('show');
    //hide
    $(this.mymodal.nativeElement).modal('hide');

    //catch the event when modal is hidden
    //trigger implicity hide when backdrop is clicked or esc keypress
    // i had issues on closing modals and this fixed the problem
    $(this.mymodal.nativeElement).on('hidden.bs.modal',  () => {
        $(this).modal('hide');
        this.cancelProcedure();//my internal reset function
    });

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

2 个答案: