Angular：模态 window 渲染包含在组件内

Question

I've nested some different Angular modules. Each one has is own service and such. The problem is when I want to open a modal window from an embedded module: Those elements open and works fine, but inside of it own module. I've searched but I couldn't find any specific solution for open the modal window outside all components (on browser main area, like a regular modal window).

A GIF showing actual results:

I've tried to change the z-index (on main class, separated one, hardcoded in the html tag), disabling backdrop, and many other (nasty) tricks, but none of them seems solve this.

The html looks like this:

<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>

This element is at the end of the html file. Outside of all <div>

Already tried on bsModal:

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

And the relevant code of this component:

    @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();
    }

Can you suggest me any solution to open every modal window on the browser area (no inside any component).

Thank you very much!

Answer 1

You can generate modal component and attach it to some root node of f.ex. AppComponent elementRef; Here I made a forked a DEMO (click "customers" and then "show modal"). It attaches Modal component from a lazy loaded modules component.

First, in AppComponent grab a reference of its nativeElement, to access it later when attaching modal:

this.nativeElement = this.elRef.nativeElement

For Modal component add needed styles, like position: absolute; top: 0; left: 0 position: absolute; top: 0; left: 0 position: absolute; top: 0; left: 0 Then import it into entryComponents because you will create it dynamically.

Then instantiate Modal and attach to host:

  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);
  }

Some code from appendComponentToBody function borrowed from this repo