Angular: 如何使用ViewChild改变CSS

Question

我希望能够使用ViewChild或Renderer2更改CSS样式，但我无法实现。你有示例代码吗？

以下是不起作用的代码。

constructor(private renderer: Renderer2) {}

public onClick(){                
      this.renderer.setStyle('main-wrapper', 'color', 'blue');   
     }

- Gelso77

Answer 1

试试这个：

export class BypartSubBarComponent implements AfterViewInit {

  @ViewChild('subbar', {static: false}) subbar: MatToolbar;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    this.renderer.setStyle(
      this.subbar._elementRef.nativeElement, 'backgroundColor', '#ff0000');
  }
}

- Post Impatica

Answer 2

第一个参数需要是元素。例如，如果您的元素具有id为main-wrapper，则可以这样做：

const element = document.getElemenetById('main-wrapper');
this.renderer.setStyle(element, "color", "blue");

不过，我建议使用ViewChild：

<div #mainWrapperElement>
     ....
</div>

import { ViewChild } from '@angular/core';

@ViewChild('mainWrapperElement') myElement: HTMLElement;

then...

this.renderer.setStyle(this.myElement, "color", "blue");

< p >顺便提一下，Angular有很酷的方式来操纵样式，我建议研究一下（ngStyle或style绑定）。

- David Anthony Acosta

---

非常感谢，但是这行代码使用@ViewChild失败了：this.renderer.setStyle(this.myElement, "color", "blue");错误信息："无法设置未定义的属性'color'"。 - Gelso77

它可能会因为几个原因而失败。一个常见的原因是当你运行该方法时，元素当前不在视图中。这可能是因为元素尚未加载，或者您将其隐藏在*ngIf下面，例如。确保元素已定义console.log(this.myElement)。并且该元素实际上已经标记为#variableName。 - David Anthony Acosta