Question

使用Vanilla或jQuery非常简单。但是我对Angular毫无头绪。

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

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

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

有关如何对其进行存档的任何线索吗？

Answer 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

Answer 2

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

如何动态地用角创建元素？

2 个答案: