Пользовательские свойства CSS Angular 2+ (переменные) с помощью Renderer
Я пытаюсь преобразовать код JavaScript Vanilla в Angular 2+.
В Javascript у меня есть такое утверждение:
document.documentElement.style.setProperty(`--${cssVariableName}`, value);
В Angular единственный способ повторить вышеприведенное утверждение - вот так:
renderer.setProperty(document.documentElement, 'style', `--${cssVariableName}: ${value}`);
Проблема: если у меня несколько настраиваемых свойств, которые динамически устанавливаются в разное время (--cssVariable1, --cssVariable2...). Angular Renderer перезапишет свойство style вместо добавления к свойству style.
Можно ли использовать средство визуализации для достижения этой функциональности? Если нет, есть ли предпочтительный способ использования пользовательских свойств CSS в Angular? Спасибо!
2 ответа
То, что вы могли бы использовать, это [ngStyle]. Вам не нужно использовать рендерер.
В вашем контроллере вы можете иметь объект со свойствами CSS, которые вы хотите применить.
Как это.
props = {'color': 'red', 'font-size': '18px'};
И затем в вашем html вы можете использовать это внутри ngStyle, чтобы применить эти свойства к элементу.
<div [ngStyle]="props">Great example</div>
Надеюсь, поможет.
Попробуйте использовать Renderer2 Объект setStyle метод
/**
* Implement this callback to set a CSS style for an element in the DOM.
* @param el The element.
* @param style The name of the style.
* @param value The new value.
* @param flags Flags for style variations. No flags are set by default. enum: 1 or 2, 1: Marks a style as important. 2: Marks a style as using dash case naming (this-is-dash-case).
*/
abstract setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void;
Ты нуждаешься в этом
renderer.setStyle(document.documentElement, `--${cssVariableName}`, `${value}`, 2);
Попробуйте использовать setStyle метод
renderer.setStyle(document.documentElement, `--${cssVariableName}`, `${value}`);