Angular2 - DOM öğesine div ekle

Question

Angular2 kullanarak div öğesine bazı alt öğeler eklemeye çalışıyorum. Öğeyi @ViewChild kullanarak elde edebileceğimi biliyorum ancak DOM'a bazı html kodunu nasıl ekleyebilirim?

Yapmaya çalıştığım şey, JQuery ekleme işlevinin "taklit edilmesi" dir. Angular2'de bunu yapmanın bir yolu var mı?

Yardımlarınız için çok teşekkürler! Bunu [innerHTML] etiketini kullanarak html bağlayabilir

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

:

İşte benim bileşenidir. Eğer viewchild .: gerekmez Bu şekilde

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

Bileşen:

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

i düzgün kullanmak istiyorsunuz Başka bir çözüm dizelerden oluşan bir dizi oluşturmak ve *ngFor kullanmaktır ve halkaya bir şablon aracılığıyla o. Bunu yaparak, yazı tipinde HTML'den kaçınmak mümkündür ve bir güncelleme olduğunda her iki yerde de html'yi düzenlemeniz gerekmez. Örneğin

:

Şablon:

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

Bileşen: Yardım için

export class BuilderComponent { 

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

    ngAfterViewInit() { } 

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