angular - 如何从应用程序的任何位置打开模态

Question

我需要将所有模态框放在一个地方，这样我就可以从应用程序的任何地方访问任何模态框。这可能吗？

现在，我用下面的方式打开一个模式。

openModal(template: TemplateRef<any>,cssClass:any) {
    if(this.modalRef) {
        this.closeModal();
    }
    this.config.class = cssClass;
    this.modalRef = this.modalService.show(template, this.config);
}
closeModal() {
    if(this.modalRef) {
        this.modalRef.hide();
        this.modalRef = null;
    }
}

在我的 HTML 中

<button (click)="openModal(someModal,'some-class')">Click</button>

<ng-template #someModal> <div class="modal-body"> Login Here </div></ng-template>

我试过以下方法 https://stackblitz.com/edit/angular-wuntd3

我本地的 HTML 元素

Answer 1

您可以创建一个自定义指令，您可以在其中从应用程序的任何位置访问模式。只有模态的内容与要求的上下文不同。