Angular2 - Thêm div vào DOM

Question

Tôi đang cố gắng thêm một số phần tử con vào div bằng Angular2. Tôi biết tôi có thể lấy phần tử bằng cách sử dụng @ViewChild nhưng làm cách nào để tôi có thể thêm một số mã html vào DOM?

Điều tôi đang cố làm là bắt chước chức năng nối thêm JQuery. Có cách nào để làm điều đó trong Angular2?

Cảm ơn rất nhiều vì đã giúp đỡ!

Đây là thành phần của tôi:

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

Bạn có thể ràng buộc html bằng cách sử dụng [innerHtml] thẻ. Bằng cách đó bạn không cần viewchild .:

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

Component:

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

Một giải pháp i đúng cách sẽ sử dụng là tạo ra một mảng các chuỗi, và sử dụng *ngFor và một mẫu để lặp qua nó. Bằng cách làm như vậy, bạn có thể tránh HTML ở dạng chữ và bạn không cần phải chỉnh sửa cả hai địa chỉ html mỗi lần có bản cập nhật.

Ví dụ:

mẫu:

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

Component:

export class BuilderComponent { 

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

    ngAfterViewInit() { } 

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