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

Question

建議使用 Angular Renderer2 以編程方式操作 DOM。

在我的指令中，我采用了一些el.nativeElement.innerText ，轉換此文本並將其添加到我的元素中：

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

問題出在el ——它已經有了文本，所以它在它后面附加了轉換后的文本。

我檢查了 Renderer2 文檔，似乎我可以使用removeChild()而不將引用傳遞給 child，所以我不能先使用 Renderer2 清除組件？

在這種情況下，實現它的唯一方法是在渲染器方法之前使用innerText = '' ，這使其毫無意義。

Answer 1

也許是這樣的：

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

Answer 2

這是正確的代碼：

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

Answer 3

這是使用 while 循環的另一個選項。 只要在第一個位置存在子項，子項就會從集合的末尾移除。

const myEl = this.el.nativeElement;

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

Answer 4

這是對我有用的：

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