Angular 2 lädt untergeordnete Komponente auf Klick

Question

Ist es möglich, die untergeordnete Komponente zu laden, wenn auf die Schaltfläche in der übergeordneten Vorlage geklickt wird? Zum Beispiel würde das übergeordnete Vorlage html wie folgt aussehen:

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

Der Grund, warum ich es tun möchte, so, weil das ist mein-Kind-Komponente einige Zeit dauert zu laden und es verlangsamt alles. Daher möchte ich es nur laden, wenn der Benutzer darauf klickt, um es zu laden. Ich kann die Elternvorlagenstruktur nicht ändern. Es muss da sein.

Ich möchte ngOnInit der Kindkomponente nur eingeben, wenn die Schaltfläche zum Laden geklickt wird.

Answer 1

Sie können mit * ngIf Richtlinie Komponente für Initing, so dass Ihr Code wie diese Verwendung von Flag

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

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

Answer 2

Fabrikat sein wird, die Last der Kinderkomponente zu steuern.

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

In Ihrer Stammkomponente .ts

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

Answer 3

können Sie verwenden vielleicht die grundlegendste Richtlinie ngIf

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

In Ihrer Komponente

loadMyChildComponent(){ 
loaded=true; 
} 

Answer 4

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

In Elternklasse die varible verstecken erklären und eine Funktion loadMyChildComponent

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