Question

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

我要做的是“模仿”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); (???)
  }
 }

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和一个模板循环遍历它。通过这样做，可以避免使用打字稿中的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");
  }
}

Angular2 - 将div添加到DOM

1 个答案: