Angular：如何使用 ViewChild 更改 CSS答案

【问题标题】：Angular: how to change css using ViewChildAngular：如何使用 ViewChild 更改 CSS
【发布时间】：2019-03-03 14:58:50
【问题描述】：

我想使用 ViewChild 或 Renderer2 更改 CSS 样式，但我做不到。有代码示例吗？

下面是不起作用的代码。

constructor(private renderer: Renderer2) {}

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

【问题讨论】：

标签： javascript angular

【解决方案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');
  }
}

【讨论】：

【解决方案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;

那么……

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

另一方面，Angular 有非常酷的方式来操纵我建议研究的样式（ngStyle 或样式绑定）。

【讨论】：

非常感谢，但是使用@ViewChild 的这条线失败了：this.renderer.setStyle(this.myElement, "color", "blue");错误：“无法设置未定义的属性‘颜色’”
失败可能有几个原因。一个常见的原因是当您运行该方法时该元素当前不在视图中。例如，如果元素尚未加载，或者您将其隐藏在 *ngIf 下，则可能会发生这种情况。确保元素定义为 console.log(this.myElement)。并且该元素实际上被标记为#variableName