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的一个薄包装。

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

Angular Renderer2-destroy（）如何工作？

1 个答案: