renderer.setElementStyle “无法设置属性‘背景色’答案

【问题标题】：renderer.setElementStyle “Cannot set property 'background-color'renderer.setElementStyle “无法设置属性‘背景色’
【发布时间】：2019-02-01 20:29:19
【问题描述】：

我正在学习角度，我正在尝试使用 _renderer.setElementStyle 设置背景颜色，但它不适用，请有人帮助我

export class AppComponent {

  constructor(private elementRef: ElementRef,
    private render: Renderer) { }

  @HostListener("mouseover") onmouseover() {
    this.changeTextColor("red");
  }

    @HostListener("mouseleave") onmouseleave() {
    this.changeTextColor("blue");
  }

  changeTextColor(color: string) {
    this.render.setElementStyle(this.elementRef.nativeElement,"background-color",color);
  }
}

https://stackblitz.com/edit/angular-jsm9ii?file=src%2Fapp%2Fapp.component.ts

【问题讨论】：

你可以在这里看到类似的东西stackoverflow.com/questions/39023277/…

标签： angular

【解决方案1】：

默认情况下，组件元素具有内联显示样式。您应该使用 css 将其更改为块样式：

:host {
  display: block;
}

这将使stack 工作。

另一方面，Renderer 已被弃用，在撰写本文时，应该使用具有 setStyle 方法的Renderer2

另一方面，不应将渲染器用于此类任务。主要是，你永远不应该使用渲染器，除非你不能以其他方式访问元素。例如，如果它们是通过 3rd 方库注入的。

我知道您正在尝试 Angular，但只是为了使其成为一个完整的答案，处理此问题的最佳方法是使用 @HostBinding() 以及样式或类绑定。这仍然没有消除使其成为块元素的必要性。因此，最好将bgColor 附加到组件模板内的块元素：

@HostBinding('style.backgroundColor')
bgColor: string = 'blue';

@HostListener("mouseover") onmouseover() {
  this.bgColor = "red";
}

@HostListener("mouseleave") onmouseleave() {
  this.bgColor = "blue";
}

【讨论】：