Demostración corregida de acuerdo con la respuesta aceptada
Considere un componente, llamémoslo <simple-dialog> , con esta plantilla:
<button type="button" (click)="visible = !visible">TOGGLE</button> <div *ngIf="visible"> <ng-content select="[main]"></ng-content> </div>Omito la definición del componente TypeScript porque es básicamente la misma que la generada por ng-cli.
Entonces lo uso así:
<simple-dialog> <div main> <app-form></app-form> </div> </simple-dialog> Cuando hago clic por primera vez en el botón, se representa el componente secundario; si vuelvo a hacer clic en el botón, el componente secundario se elimina del DOM. El problema es que, en este punto, no se llama a ngOnDestroy app-form .
Soy nuevo en angular, por lo que no estoy seguro de si mis expectativas son incorrectas.
Lo que está tratando de lograr se llama proyección de contenido condicional.
En su caso, al usar ng-content , los componentes son instanciados por el componente externo, incondicionalmente; el componente interno simplemente decide no mostrarlo.
Si desea una creación de instancias condicional, debe pasar una plantilla en su lugar:
<simple-dialog> <ng-template> <div main> <app-form></app-form> </div> </ng-template> </simple-dialog> y use una propiedad anotada @ContentChild para acceder a la plantilla desde el contenido dentro de SimpleDialogComponent :
@ContentChild(TemplateRef, { static: false }) content!: TemplateRef<unknown>;que luego se puede representar en la plantilla como
<div *ngIf="visible"> <ng-container [ngTemplateOutlet]="content"></ng-container> </div>También puede leer sobre esto aquí: https://angular.io/guide/content-projection#conditional-content-projection