Angular: как изменить CSS с помощью ViewChild

Question

Я хотел бы изменить стиль CSS, используя ViewChild или Renderer2, но я не могу.У вас есть пример кода?

Ниже приведен код, который не работает.

constructor(private renderer: Renderer2) {}

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

Answer 1

Первый аргумент должен быть элементом.Например, если ваш элемент имеет идентификатор 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 или привязка стилей).