我试图使用Angular2向div添加一些子元素.我知道我可以使用@ViewChild获取元素但是我怎样才能真正将一些HTML代码附加到DOM中？
我想要做的是“模仿”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); (???)
}
}
解决方法
您可以使用[innerHtml]标签绑定html.这样你就不需要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");
}
}
