Угловой 2 загружает дочерний компонент на клик

Можно ли загрузить дочерний компонент при нажатии кнопки в родительском шаблоне? Например, родительский шаблон html будет выглядеть так:

<button (click)="loadMyChildComponent();">Load</button>
<my-child-component></my-child-component>

Причина, по которой я хочу это сделать, заключается в том, что компонент my-child занимает некоторое время для загрузки, и это замедляет все. Поэтому я хотел бы загрузить его только в том случае, если пользователь нажимает на его загрузку. Я не могу изменить структуру родительского шаблона. Он должен быть там.

Я хочу ввести ngOnInit дочернего компонента только при нажатии кнопки загрузки.

Ответ 1

Вы можете использовать директиву * ngIf для инициирующего компонента из parent, поэтому ваш код будет таким

<button (click)="loadMyChildComponent();">Load</button>
<my-child-component *ngIf="loadComponent"></my-child-component>

loadMyChildComponent() {
  loadComponent = true;
  ...
}

Ответ 2

Используйте флаг для управления загрузкой дочернего компонента.

<button (click)="loadMyChildComponent();">Load</button>
<div *ngIf= 'loadComponent'>
<my-child-component></my-child-component>
</div>

В вашем родительском компоненте.ts

 private loadComponent = false;
    loadMyChildComponent(){
       this.loadComponent = true;
    }

Ответ 3

Вы можете использовать, пожалуй, самую основную директиву ngIf

<button (click)="loadMyChildComponent();">Load</button>
<my-child-component *ngIf="loaded"></my-child-component>

В вашем компоненте

loadMyChildComponent(){
 loaded=true;
}

Ответ 4

<button (click)="loadMyChildComponent()">Load</button>
<div [hidden]="hide">
<my-child-component></my-child-component>
</div>

В родительском классе объявите varible hide и сделайте функцию loadMyChildComponent

 public hide = true;
  loadMyChildComponent(){
       this.hide= true;
    }

Ответ 5

Вы можете использовать угловую директиву *ngIf

<button (click)="loadChildComponent();">Load Child Component</button> <child-component *ngIf="childComponentLoaded"></child-component>

в вашем component.js

public childComponentLoaded: boolean = false;
loadChildComponent() {
    this.childComponentLoaded = true
}