两种方法在Angular中动态设置宿主元素的风格之间的差异

Question

根据官方文档和其他文章，Angular提供了两种样式来设置宿主元素的方式。

通过：

:host文件中的
• .css选择器
• @HostBinding
• Renderer2

使用:host选择器，我可以声明一些静态样式。

如何动态更改宿主元素的样式？
假设我想在发生事件时更改宿主元素的display状态：

使用@HostBinding

export class UseHostBindingComponent {
  @HostBinding('style.display') display: string;

  // Change the display state of the host element
  onClick(): void {
    this.display = 'none';
  }
}

使用Renderer2

export class UseRenderer2Component {
  constructor(
    private renderer: Renderer2,
    private el: ElementRef
  ) {}

  // Change the display state of the host element
  onClick(): void {
    this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
  }
}

两种方法都有效，但是我只是想知道它们之间的区别。任何见识将不胜感激！

Answer 1

使用Renderer2，您可以在需要时及时更新视图。

使用HostBinding，每次调用变更检测时，您便会告诉Angular检查绑定属性，并在值更改时更新View。因此，如果不为您的组件调用“更改检测”，则View将不会更新。