Question

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

下面是无效的代码。

constructor(private renderer: Renderer2) {}

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

Answer 1

第一个参数必须是元素。例如，如果您的元素具有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或样式绑定）。

Answer 2

尝试一下：

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

Angular：如何使用ViewChild更改CSS

2 个答案: