點擊角度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; 
    }