如果用户单击弹出窗口外侧，Angular4弹出窗口将关闭？

我遵循了angular4中弹出模式的教程：

如果在模态外部单击，模态将消失。但我不希望模式消失，直到用户单击关闭图标

这是模态的OnInit：

ngOnInit(): void {
        let modal = this;

        // ensure id attribute exists
        if (!this.id) {
            console.error('modal must have an id');
            return;
        }

        // move element to bottom of page (just before </body>) so it can be displayed above everything else
        this.element.appendTo('body');

        // close modal on background click
        this.element.on('click', function (e: any) {
            var target = $(e.target);
            if (!target.closest('.modal-body').length) {
                modal.close();
            }
        });

        // add self (this modal instance) to the modal service so it's accessible from controllers
        this.modalService.add(this);
    }

ngOnInit（）：void{
让modal=this；
//确保id属性存在
如果（！this.id）{
console.error（'modal必须有一个id'）；
返回；
}
//将元素移动到页面底部（就在前面），这样它就可以显示在所有内容之上
this.element.appendTo（'body'）；
//在后台单击关闭模式
this.element.on（'click'，函数（e:any）{
var目标=$（e.target）；
如果（！target.closest（'.modal body'）。长度）{
modal.close（）；
}
});
//将self（此模式实例）添加到模式服务，以便可以从控制器访问它
this.modalService.add（this）；
}

以下是我实际拥有的东西：

---

只需从

app/\u指令/modal.component.ts

    // close modal on background click
    this.element.on('click', function (e: any) {
        var target = $(e.target);
        if (!target.closest('.modal-body').length) {
            modal.close();
        }
    });

更新的Plunker

更新

您可以使用材料对话或使用引导模式

有关材料对话实例，请检查此工作并单击“联系人”

你也可以检查这个

出于您不希望在单击“外部”时关闭模式的目的，请查看此

---

要使用引导模式检查它也有一个工作演示

只需从

app/\u指令/modal.component.ts

    // close modal on background click
    this.element.on('click', function (e: any) {
        var target = $(e.target);
        if (!target.closest('.modal-body').length) {
            modal.close();
        }
    });

更新的Plunker

更新

您可以使用材料对话或使用引导模式

有关材料对话实例，请检查此工作并单击“联系人”

你也可以检查这个

出于您不希望在单击“外部”时关闭模式的目的，请查看此

---

要使用引导模式检查，它也有一个工作演示

在angular内部使用JQuery对于这样的事情不是一个好的实践，我不推荐本教程：/Supamiu我是angular的新手，你能告诉我为什么在angular内部使用jquey不是一个好的实践吗，还有更好的方法。好的，你能为angula2/4中的弹出窗口提供任何解决方案吗使用JQuery inside angular这样的东西不是一个好的实践，我不推荐这个教程：/Supamiu我是angular的新手，你能告诉我为什么在angular中使用jquey不是一个好的实践吗因为JQuery做angular已经可以做的事情，还有更好的方法。好的，你能为angula2/4Thanks中的弹出窗口提供任何解决方案吗？你真的节省了我的时间吗？有没有更好的解决方案而不使用jqueryNo，我不想使用use material，我正在使用bootstrap3+angular4Thanks，你真的节省了我的时间吗？没有jqueryNo，我不想使用use material，我正在使用bootstrap3+angular4