Angular2 - Dodaj div do DOM

Question

Próbuję dodać niektóre elementy podrzędne do elementu div za pomocą Angular2. Wiem, że mogę uzyskać element za pomocą @ViewChild, ale jak mogę dodać kod HTML do DOM?

Co próbuję zrobić, to "naśladować" funkcję dołączania JQuery. Czy jest jakiś sposób na zrobienie tego w Angular2?

Dziękuję bardzo za pomoc!

Oto mój komponent:

import { Component, ViewChild, ElementRef } from '@angular/core'; 

@Component({ 

    moduleId: module.id, 

    selector: 'my-selector', 

    template: `<div #builder class="row"> 
    <div class="s12 teal lighten-2"> 
    <p class="flow-text">teste do html builder</p> 
    </div> 
</div> 
<a class="btn-floating btn-large waves-effect waves-light red" (click)="addRow()"><i class="material-icons">add</i></a>`, 

}) 

export class BuilderComponent { 

@ViewChild('builder') builder:ElementRef; 

    ngAfterViewInit() { 
    console.log(this.builder.nativeElement.innerHTML); 
    } 

    addRow() { 

    let htmlText = `<div #row class="row"> 
     <div class="s12 teal lighten-2"> 
     <p class="flow-text">div inside parent - html builder</p> 
     </div> 
    </div>`; 

    this.builder.nativeElement.append(htmlText); (???) 
    } 
} 

Answer 1

Można powiązać html za pomocą [InnerHTML] znacznik. W ten sposób nie trzeba się viewchild .:

<div [innerHtml]="htmlText"></div> 

Składnik:

export class BuilderComponent { 

    htmlText: string; 

    ngAfterViewInit() { } 

    addRow() { 

    this.htmlText = this.htmlText + `<div #row class="row"> 
     <div class="s12 teal lighten-2"> 
     <p class="flow-text">div inside parent - html builder</p> 
     </div> 
    </div>`; 
    } 
} 

Innym rozwiązaniem chciałbym właściwie używać to utworzyć tablicę ciągów i używać *ngFor i szablon do pętli to. W ten sposób można uniknąć pisania w maszynopisie HTML i nie trzeba edytować html w obu miejscach za każdym razem, gdy pojawi się aktualizacja.

Na przykład:

Szablon:

<div *ngFor="let row of rows" class="row"> 
    <div class="s12 teal lighten-2"> 
    <p class="flow-text">{{ row }}</p> 
    </div> 
</div> 

Składnik:

export class BuilderComponent { 

    rows: Array<string> = new Array(); 

    ngAfterViewInit() { } 

    addRow() { 
    this.rows.push("Test 123 text"); 
    } 
}