html – Angular2 – 将div添加到DOM

发布时间:2019-05-15 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了html – Angular2 – 将div添加到DOM脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图使用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");
  }
}

总结

以上是脚本之家为你收集整理的html – Angular2 – 将div添加到DOM全部内容,希望文章能够帮你解决html – Angular2 – 将div添加到DOM所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: