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

Question

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

1

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

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

constructor(private renderer: Renderer2) {}

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

Gelso77 27 сен. 2018, в 19:07

Источник

Теги:

angular

javascript

1 ответ

Ещё вопросы

David Anthony Acosta · Answer 1 · 2018-09-27T13-48-00.000Z

Первый аргумент должен быть элементом. Например, если ваш элемент имеет идентификатор основной оболочки, вы можете сделать следующее:

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");

На стороне примечание, угловой имеет действительно классные способы манипулирования стилями, которые я бы предложил посмотреть (ngStyle или привязка стиля).

большое спасибо, но эта строка, использующая @ViewChild, завершается неудачей: this.renderer.setStyle (this.myElement, "color", "blue"); Ошибка: «Невозможно установить свойство« цвет »неопределенного»
Это может быть неудачным по нескольким причинам. Одной из распространенных причин является то, что элемент в данный момент отсутствует в представлении при запуске метода. Это может произойти, если элемент еще не загружен, или если вы, например, скрываете его под * ngIf. Убедитесь, что элемент определен console.log (this.myElement). и что элемент на самом деле помечен #variableName