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

我希望这些方法在销毁后不起作用，因为我希望宿主元素或渲染器被销毁。

我错过了什么？

Stackblitz 示例：

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

Answer 1

对于 DOM 渲染器，destroy() 是一个不做任何事情的空方法：

destroy(): void {}

它只是 DOM API 的一个薄包装器。

如果您想实现自己的自定义渲染器，销毁钩子可能会更有意义。