点击角度2加载子组件点击

Question

点击父模板中的按钮时是否可以加载子组件？举例来说，父模板HTML看起来像：

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

我想那样做是因为我的孩子组分需要一些时间来加载，它会减慢一切的原因。因此，我只想在用户点击加载它时加载它。我无法更改父级模板结构。它必须在那里。

我想只在加载按钮被点击时才进入子组件的ngOnInit。

Answer 1

您可以使用* ngIf指令为INITING组件，所以你的代码会是这样

<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; 
    } 

Answer 3

可以使用或许是最根本的指令ngIf

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

在你的组件

loadMyChildComponent(){ 
loaded=true; 
} 

Answer 4

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

在父类中声明varible隐藏，使功能loadMyChildComponent

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