¿Es posible cargar el componente secundario cuando se hace clic en el botón de la plantilla principal? Por ejemplo, la plantilla principal html se vería así:
<button (click)="loadMyChildComponent();">Load</button> <my-child-component></my-child-component>La razón por la que quiero hacerlo así es porque el componente my-child tarda un tiempo en cargarse y ralentiza todo. Por lo tanto, me gustaría cargarlo solo si el usuario hace clic para cargarlo. No puedo cambiar la estructura de la plantilla principal. Tiene que estar alli.
Quiero ingresar ngOnInit del componente del niño solo cuando se hace clic en el botón de carga.
Puede usar la directiva * ngIf para el componente de inicio del padre, por lo que su código será así
<button (click)="loadMyChildComponent();">Load</button> <my-child-component *ngIf="loadComponent"></my-child-component> loadMyChildComponent() { loadComponent = true; ... }Utilice la bandera para controlar la carga del componente secundario.
<button (click)="loadMyChildComponent();">Load</button> <div *ngIf= 'loadComponent'> <my-child-component></my-child-component> </div>En su componente principal .ts
private loadComponent = false; loadMyChildComponent(){ this.loadComponent = true; }