Angular Renderer2 - destroy（）如何工作？

Question

How does destroy() method of Angular Renderer2 work?

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();
  }   


}

Here, I expect destroy() to do exactly what angular.io says:

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

Then I add these 2 lines after destroy() and setStyle method works for both elements.

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

I expect the methods to not work after destroy because I expect the host element or renderer to be destroyed.

What am I missing?

Stackblitz example:

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

Answer 1

For a DOM Renderer, destroy() is an empty method that doesn't do anything:

destroy(): void {}

It's just a thin wrapper over the DOM APIs.

The destroy hook is there in case you want to implement your own custom renderer where destroying it might make more sense.