如何使用角度动态创建元素？ [关闭]

Posted 2023-02-22

【中文标题】如何使用角度动态创建元素？ [关闭]

【英文标题】：How to create elements on the fly with angular? [closed]

【发布时间】：2019-01-14 20:26:17

【问题描述】：

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

我需要创建一个非常自定义的树视图，所以我有这个...

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

我想将 node1 插入根目录，我还需要处理事件。

关于如何存档的任何线索？

【问题讨论】：

您是否尝试制作递归组件？ ***.com/questions/37746516/…

【参考方案1】：

使用 Renderer2 服务

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');
    );

例如：https://stackblitz.com/edit/angular-renderer2-customevent

【参考方案2】：

node1 元素本身必须是 Angular 组件。然后将其导入root 组件和create it dynamically。该组件将具有 @Output() 属性，您可以将其作为常规变量访问并订阅以侦听它的事件。