Angular Renderer2 - destroy（）如何工作？

Question

Angular Renderer2的destroy（）方法如何工作？

import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core'

@Directive({
  selector: '[destroy]'
})

export class Destroy implements OnInit {
  constructor(private elRef: ElementRef, private renderer: Renderer2) {}

  ngOnInit(){
    const currentElement = this.elRef.nativeElement;
    const nextEl = this.renderer.nextSibling(currentElement);
    this.renderer.addClass(nextEl, 'red');
    this.renderer.destroy();
  }   


}

在這里，我希望destroy（）完全符合angular.io所說的：

Implement this callback to destroy the renderer or the host element.

然后我在destroy（）之后添加這兩行，並且setStyle方法適用於這兩個元素。

  ngOnInit(){
    const currentElement = this.elRef.nativeElement;
    const nextEl = this.renderer.nextSibling(currentElement);
    this.renderer.addClass(nextEl, 'red');
    this.renderer.destroy();
    this.renderer.setStyle(currentElement, 'background-color', 'blue')
    this.renderer.setStyle(nextEl, 'background-color', 'blue')    
  }   

我希望這些方法在destroy之后不起作用，因為我希望主機元素或渲染器被銷毀。

我錯過了什么？

Stackblitz示例：

https://stackblitz.com/edit/angular-82bgqz?embed=1&file=src/app/destroy.directive.ts

Answer 1

對於DOM渲染器， destroy()是一個不執行任何操作的空方法：

destroy(): void {}

它只是DOM API的一個薄包裝器。

如果你想要實現自己的自定義渲染器，銷毀它可能會更有意義。