Angular2 - DOM에 div 추가

Question

Angular2를 사용하여 div에 일부 자식 요소를 추가하려고합니다. @ViewChild를 사용하여 요소를 가져올 수 있지만 실제로 DOM에 일부 HTML 코드를 추가하는 방법은 무엇입니까?

내가하려는 것은 JQuery 추가 기능을 "모방 (mimic)"하는 것입니다. Angular2에서이를 수행 할 수있는 방법이 있습니까?

도움 주셔서 대단히 감사합니다. 당신은 [innerHTML을] 태그를 사용하여 HTML을 결합 할 수

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

:

여기 내 구성 요소입니다. 당신이 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을 사용하는 것입니다 및 루프에 대한 템플릿을 통해 그것. 이렇게하면 타이프 스크립트에서 HTML을 피할 수 있으며, 업데이트가있을 때마다 HTML 두 곳을 편집 할 필요가 없습니다. 예를 들어

:

템플릿 :

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