Angular2 - 将 div 添加到 DOM

Question

我正在尝试使用Angular2向div添加一些子元素。我知道可以使用@ViewChild获取该元素，但是如何将一些html代码实际添加到DOM中呢？

我想要做的是“模拟”JQuery的append函数。在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); (???)
  }
 }

- Marrone

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

- JonasMH