Angular 8x - 指令动态父级不占用父级尺寸

如何解决Angular 8x - 指令动态父级不占用父级尺寸

我正在使用我创建的动态元素附加组件。它正确附加。但动态元素不会调整到组件尺寸。作为一个将军它不知道它的孩子。有人帮我解决这个问题吗？

在图像中，我正在创建的红色边框元素之一。但是宽度没有扩展到下面的组件。

浏览器上的源代码：

我的指令：

import { DOCUMENT } from "@angular/common";
import {
  Directive,ElementRef,EventEmitter,HostListener,Inject,Input,OnInit,Renderer2,ViewContainerRef,ViewChild,} from "@angular/core";
import { Subscription } from "rxjs";
import { ComponentLoaderService } from "../services/component-loader.service";
export interface LoaderConfig {
  componentName: string;
  action: string;
  data: any;
}
@Directive({
  selector: "[ibo--ComponentLoader]",})
export class ComponentLoaderDirective implements OnInit {
  @Input() loaderConfig: LoaderConfig;
  childElement;
  elementId = "host-wrap";
  rectParent;

  fileExport = new EventEmitter();
  actionMenu = new EventEmitter();

  emitterSub: Subscription;

  @ViewChild("container",{ static: false })
  viewContainerRef: ViewContainerRef;

  private _loaderActive = false;

  constructor(
    private componentLoader: ComponentLoaderService,private elementRef: ElementRef,private renderer: Renderer2,@Inject(DOCUMENT) private document,private vr: ViewContainerRef
  ) {}

  ngOnInit() {
    this.childElement = document.createElement("div");
    this.childElement.setAttribute("class","tooltip");
    this.childElement.setAttribute("id","tooltip");

    this.childElement.style.display = "inline-block";
    this.childElement.style.position = "absolute";
    this.childElement.style.border = "1px solid red";
  }

  @HostListener("mouseenter") mouseover() {
    if (this.loaderConfig.action === "mouseenter") {
      this.embedComponent();
    } else {
      return;
    }
  }

  @HostListener("mouseleave") mouseleave() {
    if (this.loaderConfig.action === "mouseenter") {
      this.removeComponent();
    } else return;
  }

  @HostListener("click") onClick() {
    this.removeElement();
    if (this.loaderConfig.action === "click") {
      this.renderer.appendChild(window.document.body,this.childElement);
      this.toggleLoader();
    } else {
      return;
    }
  }

  removeElement() {
    const childrens = document.querySelectorAll(".tooltip");
    console.log("removeElement",childrens,childrens.length);
    if (childrens.length) {
      childrens.forEach((el) => el.remove());
    }
  }

  embedComponent() {
    const componentRef = this.componentLoader.loadComponent(
      this.loaderConfig.componentName
    );

    if (componentRef) {
      this.vr.clear();
      const ref = this.vr.createComponent(componentRef);
      ref.instance["data"] = this.loaderConfig.data;
      this.subscribetoComponentEvents(ref);
      this.renderer.appendChild(this.childElement,ref.location.nativeElement);
    }

  }
}

提前致谢。