Angular2 - 将 div 添加到 DOM答案

【问题标题】：Angular2 - Add div to DOMAngular2 - 将 div 添加到 DOM
【发布时间】：2017-02-06 10:45:43
【问题描述】：

我正在尝试使用 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); (???)
  }
 }

【问题讨论】：

标签： html dom angular

【解决方案1】：

您可以使用 [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 和一个模板循环遍历它。这样做可以避免在 typescript 中使用 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");
  }
}

【讨论】：