单击Angular 2加载子组件

Question

单击父模板中的按钮时是否可以加载子组件？例如,父模板html看起来像:

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

我想这样做的原因是因为my-child-component需要一些时间来加载它会减慢一切.因此,我只想在用户点击加载它时加载它.我无法更改父模板结构.它必须在那里.

我想只在点击加载按钮时输入子组件的ngOnInit.

Answer 1

您可以将*ngIf指令用于父级的初始化组件,因此您的代码将是这样的

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

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

Answer 2

利用标志来控制子组件的负载。

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

在你的父组件 .ts

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