在 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可以在需要时及时手动更新视图。

告诉HostBindingAngular 每次调用更改检测时检查绑定属性，并在值更改时更新视图。因此，如果您的组件没有调用更改检测，视图将不会更新。