Angular：组件内包含的模态窗口渲染

Question

我已经嵌套了一些不同的 Angular 模块。每个人都有自己的服务等。 问题是当我想从嵌入式模块打开模式窗口时：这些元素打开并且工作正常，但在它自己的模块内部。 我已经搜索过，但找不到任何特定的解决方案来打开所有组件之外的模式窗口（在浏览器主区域，如常规模式窗口）。

显示实际结果的 GIF：

我尝试更改 z-index（在主类上，分隔一个，在 html 标记中硬编码）、禁用背景和许多其他（讨厌的）技巧，但似乎都没有解决这个问题。

html 看起来像这样：

<div bsModal #modalFormPlanta="bs-modal" [config]="{backdrop: false}">
<div class="modal-dialog modal-md">
    <div class="modal-content">
        <app-formulario-planta-cliente *ngIf="showFormAddPlanta" [Client]="Client" [action]="PlantaSeleccionada?.id != null" [element]="PlantaSeleccionada" (finish)="closeFormPlanta($event)"></app-formulario-planta-cliente>
    </div>
</div>

此元素位于 html 文件的末尾。除了<div>

已经在 bsModal 上尝试过：

style="z-index: 9999 !important"
tabindex="-1"
class="modal fade"
data-backdrop="false"

以及这个组件的相关代码：

    @ViewChild('modalFormPlanta') modalFormPlanta: ModalDirective;
    
    public openEditForm(elem) {
        this.PlantaSeleccionada = elem;
        this.showFormAddPlanta = true;
        this.modalFormPlanta.show();
    }

    public closeFormPlanta(event) {
        if (event) {
            this.PlantaSeleccionada.Cliente = event;
            this.loadPlantas();
        }
        this.modalFormPlanta.hide();
    }

你能建议我任何解决方案来打开浏览器区域上的每个模式窗口（不在任何组件内）。

非常感谢！

Answer 1

您可以生成模态组件并将其附加到 f.ex 的某个根节点。 AppComponent elementRef;在这里，我创建了一个分叉的DEMO（单击“客户”，然后单击“显示模式”）。它从延迟加载的模块组件中附加 Modal 组件。

首先，在 AppComponent 中获取其 nativeElement 的引用，以便稍后在附加 modal 时访问它：

this.nativeElement = this.elRef.nativeElement

为 Modal 组件添加所需的样式，例如 position: absolute; top: 0; left: 0 然后将其导入entryComponents，因为您将动态创建它。

然后实例化 Modal 并附加到主机：

  showModal() {
    this.appendComponentToBody(ModalComponent);
  }

  appendComponentToBody(component: any) {
    // 1. Create a component reference from the component
    const componentRef = this.componentFactoryResolver
      .resolveComponentFactory(component)
      .create(this.injector);

    // 2. Attach component to the appRef so that it's inside the ng component tree
    this.appRef.attachView(componentRef.hostView);

    // 3. Get DOM element from component
    const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
      .rootNodes[0] as HTMLElement;

    const rootElementRef = this.injector.get(this.appRef.componentTypes[0])
      .nativeElement;
    // 4. Append DOM element to the body
    rootElementRef.appendChild(domElem);
  }

来自appendComponentToBody函数的一些代码借鉴自this repo