Aplicación ng-template、ng-container、ng-content de Angular

1, del contenedor

Esta etiqueta no se procesa en DOM; el contenido interno de la etiqueta se muestra de forma predeterminada y
también se pueden usar bloques de código de instrucciones estructurales (ngIf, ngFor...):

<ng-container>
  <p>Hello World !!!</p>
</ng-container>

Resultado de la representación de la página web:

<p _ngcontent-vkg-c0="">Hello World !!!</p>

2, de la plantilla

Elementos de plantilla, los elementos internos son invisibles por defecto. Cómo usar:
Método 1: use el atributo ngIf con un valor de verdadero para mostrar el contenido

<ng-template *ngIf="condition">
  <p>Hello World !!!</p>
</ng-template>

Hay muchas formas de usarlo que no se enumeran aquí. Para una introducción detallada, puede consultar el sitio web oficial

3、de contenido

Cuando el componente principal llama al componente secundario, el contenido del componente principal se proyecta en la posición especificada del componente secundario (la ubicación de ng-content en el componente secundario); similar a la ranura en VUE. Se divide en proyección predeterminada y proyección con nombre.
3.1 Proyección predeterminada: cuando solo hay un contenido ng en el subcomponente

Introducir componentes secundarios en componentes principales:

<app-child-com>
  <p>- parent component content !!! -</p>
</app-child-com>

Subensamblaje:

<p>child component content - begin</p>
<ng-content></ng-content>
<p>child component content - end</p>

efecto de visualización:

child component content - begin
- parent component content !!! -
child component content - end

La posición de la etiqueta p en el componente principal se proyecta en la posición del contenido ng en el componente secundario.

3.1 Proyección con nombre: el componente secundario tiene varios contenidos ng, es necesario especificar el nombre para proyectar el
contenido del componente principal en la ubicación especificada

<app-child-com>
  <header>
    header - parent component content !!! -
  </header>
  <div id="demo">
    id selector - parent component content !!! -
  </div>
  <div name="demo">
    name - parent component content !!! -
  </div>
</app-child-com>

contenido de subcomponente

<p>child component content</p>
<ng-content select="header"></ng-content>
<p>child component content</p>
<ng-content select="#demo"></ng-content>
<p>child component content</p>
<ng-content select="[name=demo]"></ng-content>

Use el atributo de selección, admita selectores de CSS y proyecte la posición correspondiente