Question

我正在学习角度图像，我正在尝试使用_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

Answer 1

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

:host {
  display: block;
}

这将使stack正常工作。

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

另一方面，不应执行将Renderer用于此类任务。通常，除非您以某种方式无法访问元素，否则永远不要使用渲染器。例如，如果它们是通过第三方库注入的。

据我所知，你想出来的角度，只是使它成为一个完整的答案，来处理这个问题最好的办法是使用@HostBinding()以及一个样式或类别结合。这仍然没有消除使其成为块元素的必要性。因此，最好将bgColor附加到组件模板内的block元素上：

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

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

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

renderer.setElementStyle“无法设置属性'background-color'

1 个答案: