Estoy usando ng-content para envolver un componente Angular en otro. El componente externo debe tener control total sobre cuándo se procesa o no el componente interno. Sin embargo, me encontré con una situación que no entiendo. El componente externo usa una plantilla como la siguiente (simplificada):
<ng-template> <ng-content></ng-content> </ng-template> Según tengo entendido, el contenido no debe representarse en absoluto, ya que está contenido en la ng-template . En este ejemplo, stackblitz , puede ver que el componente interno no se procesa, pero aún se inicializa. El registro de la consola en el OnInit del componente interno todavía aparece en la consola.
Mi pregunta es:
La documentación angular tiene información sobre las directivas de estructura: solo representa o no la plantilla; no hay información detallada sobre la carga del componente en el interior.
En segundo lugar, pasa el objeto ya compilado y renderizado al ng-content .
Si desea una carga lazy para la plantilla, simplemente pase la plantilla:
<app-outer> <ng-template> <app-inner></app-inner> </ng-template> </app-outer>Y
exterior.componente.html
<ng-content></ng-content> <ng-template [ngTemplateOutlet]="template"></ng-template>componente.externo.ts
@Component({ selector: 'app-outer', templateUrl: './outer.component.html' }) export class OuterComponent { @ContentChild(TemplateRef) template: TemplateRef<unknown>; }