如何在 Angular (5+) 的 Renderer2 中清除所有子元素中的元素？

Question

建议使用Angular Renderer2来编程性地操作DOM。

在我的指令中，我获取了一些el.nativeElement.innerText文本，对其进行了转换，并希望将其添加到我的元素中：

const text = renderer.createText(`${el.innerText}%`); renderer.appendChild(el, text);

问题出在el上 - 它已经有了文本，所以它会在其后面添加转换后的文本。

我查看了Renderer2文档，似乎可以使用removeChild()而不传递子级引用，因此我无法首先使用Renderer2清除组件？

在这种情况下，唯一实现它的方法是在渲染器方法之前使用innerText =''，这使得它没有意义。

- Łukasz Ostrowski

Answer 1

也许可以这样表达：

也许可以这样说：

const childElements = this.el.nativeElement.children;
for (let child of childElements) {
  this.renderer.removeChild(this.el.nativeElement, child);
}

- J.J

Answer 2

这是正确的代码：

    const childElements = this.el.nativeElement.childNodes;
    for (let child of childElements) {
      this.renderer.removeChild(this.el.nativeElement, child);
    }

- palex01

---

这是正确的，.children存在问题，因为HTMLCollection支持方法的限制（this.el.nativeElement.children）与NodeListOf<ChildNode>（this.el.nativeElement.childNodes）不同，最显著的是forEach方法。 - Jakub

Answer 3

这是对我有效的方法：

在此列出：

element.nativeElement.childNodes.forEach(node => {
  this.renderer.removeChild(element.nativeElement, node)
})

- Florian Ludewig

Answer 4

这里有另一种使用while循环的选项。只要第一个位置存在子元素，子元素将从集合末尾移除。

const myEl = this.el.nativeElement;

while(myEl.firstChild) {
  this.renderer.removeChild(myEl, myEl.lastChild);
}

- patelb