Angular2 - 将 div 添加到 DOM

Posted 2023-03-05

【中文标题】Angular2 - 将 div 添加到 DOM

【英文标题】：Angular2 - Add div to 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); (???)
  
 

【参考方案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");