Angular：如何使用 ViewChild 更改 css

Question

我想使用 ViewChild 或 Renderer2 更改 css 样式，但我无法更改。你有代码示例吗？

下面是不起作用的代码。

constructor(private renderer: Renderer2) {}

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

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');
  }
}

Answer 2

第一个参数必须是元素。例如，如果您的元素具有 main-wrapper 的 id，那么您可以这样做：

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 或样式绑定）。