如何使用angular动态创建元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (787)

使用Vanilla或jQuery非常简单。但我对angular一无所知。

我需要创建一个非常定制的树视图,所以我有:

<div class="tree">
  <div class="root">
    <div class="node 1" (click)="click()"></div>
  </div>
</div>

我想在根目录中插入节点1,还需要处理事件。

有什么关于如何存档的线索吗?

提问于
用户回答回答于

使用Render 2服务

const div = this.renderer2.createElement('div');
  const text = this.renderer2.createText('Hello world!');

  this.renderer2.appendChild(div, text);
  this.renderer2.appendChild(this.elem.nativeElement, div);


    this.renderer2.listen(this.elem.nativeElement, 'click', () => {
      alert('Click Event From dynamically created Div');
    });
用户回答回答于

node1元件必须是angular的部件本身。然后,你将在root组件内导入它并动态创建它。该组件将具有@Output()可以作为常规变量访问的属性,并订阅以监听它的事件。

扫码关注云+社区

领取腾讯云代金券