クリック時の角2のロード子コンポーネント

Question

親テンプレートのボタンをクリックしたときに子コンポーネントを読み込むことはできますか？例えば、親テンプレートのHTMLは次のようになります。私の子コンポーネントをロードするのに時間がかかり、それがすべてを遅くするので

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

私はそのようにそれをやりたい理由があります。したがって、私はそれをロードするためにユーザーがクリックした場合にのみロードしたいと思います。親のテンプレート構造を変更することはできません。それはそこになければならない。

ロードボタンをクリックした場合にのみ子コンポーネントのngOnInitを入力したいと考えています。

Answer 1

あなたはので、あなたのコードは、子コンポーネントの負荷を制御するためのフラグを使用してください。この

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

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

Answer 2

ようになり、コンポーネントをINITINGため* ngIfディレクティブを使用することができます。

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