कोणीय 2 - डीओएम

Question

में div जोड़ें मैं कोणीय 2 का उपयोग कर div में कुछ बाल तत्व जोड़ने की कोशिश कर रहा हूं। मुझे पता है कि मैं @ViewChild का उपयोग कर तत्व प्राप्त कर सकता हूं लेकिन मैं वास्तव में कुछ HTML कोड को डोम में कैसे जोड़ सकता हूं?

जो मैं करने की कोशिश कर रहा हूं वह JQuery एपेंड फ़ंक्शन "नकल" है। Angular2 में ऐसा करने का कोई तरीका है?

मदद के लिए बहुत बहुत धन्यवाद!

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

आप [innerHTML] टैग का उपयोग एचटीएमएल बाध्य कर सकते हैं:

यहाँ मेरी घटक है। इस तरह आप viewchild .: जरूरत नहीं है

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

घटक:

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

एक अन्य समाधान मैं ठीक से प्रयोग करेंगे तार की एक सरणी बनाते हैं, और *ngFor उपयोग करने के लिए है और लूप करने के लिए एक टेम्पलेट यह। ऐसा करके, टाइपस्क्रिप्ट में एचटीएमएल से बचना संभव है, और जब भी कोई अपडेट होता है तो आपको एचटीएमएल दोनों स्थानों को संपादित करने की आवश्यकता नहीं होती है।

उदाहरण के लिए:

टेम्पलेट:

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

घटक: मदद के लिए बहुत बहुत

export class BuilderComponent { 

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

    ngAfterViewInit() { } 

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