Estamos construyendo una biblioteca angular de 4 componentes y uno de los componentes es un componente Ocupado. El propósito del componente es permitir que un desarrollador cree una superposición en cualquier elemento HTML que contenga un gráfico giratorio.

<div *xuiBusy="isBusy">...</div>

Cuando el valor deisBusy Es cierto que queremos agregar al contenido interno de ladiv para que podamos presentar los elementos superpuestos sobre el contenido.

Hemos podido agregar el componente alViewContainerRef Sin embargo, esto inserta el elemento ocupado como un hermano para eldiv en lugar de dentro deldiv como se desee.

    ngOnInit(): void {
      const compFactory = this._componentFactory.resolveComponentFactory(XuiBusyComponent);
      const comp = this._viewContainer.createComponent(compFactory);

Lo que hace el consumidor:

<div *xuiBusy="isBusy">
  <span>This is the content</span>
</div>

CuandoisBusy está establecido en verdadero, queremos alterar el mercado para que se vea así. Darse cuenta de<spinner> ha sido agregado adiv elemento.

<div *xuiBusy="isBusy">
  <span>This is the content</span>
  <spinner>Please wait...</spinner> <-- inserted by directive
</div>

Cualquier consejo es apreciado!