使用普通的旧式 JavaScript,这非常简单:
myElement.style.setProperty('property', 'value', 'important');
在 Angular 中,没有那么多。
我已经在所有地方进行了详尽的搜索,但找不到一个关于如何执行此操作的示例,所以我在这里问这个问题。
要么 Angular 中的 Renderer2 坏了,要么我只是做错了。
我将以下内容导入到我的组件中:
import {ElementRef, Renderer2, RendererStyleFlags2 } from '@angular/core';
并且,在我的构造函数中:
constructor(private elRef: ElementRef,
private renderer: Renderer2);
我在模板中的元素上设置了一个可以正常工作的样式:
this.renderer.setStyle(this.elRef.nativeElement.querySelector('.my-div'), 'color', '#fff');
当我尝试像这样设置重要标志时:
this.renderer.setStyle(this.elRef.nativeElement.querySelector('.my-div'), 'color', '#fff', RendererStyleFlags2.Important);
或者像这样:
this.renderer.setStyle(this.elRef.nativeElement.querySelector('.my-div'), 'color', '#fff', flags:RendererStyleFlags2.Important);
或者像这样:
public myFlags:RendererStyleFlags2;
this.renderer.setStyle(this.elRef.nativeElement.querySelector('.my-div'), 'color', '#fff', myFlags.Important);
或者像这样的另一种方式:
public myFlags:RendererStyleFlags2.Important;
public myFlags:RendererStyleFlags2.Important = 1;
以及使用数组和对象的许多其他尝试:
myFlags:any = {important: 1}
以上都不起作用。
这是 Angular Core 中存在的方法:
setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
if (flags & RendererStyleFlags2.DashCase) {
el.style.setProperty(
style, value, !!(flags & RendererStyleFlags2.Important) ? 'important' : '');
} else {
el.style[style] = value;
}
}
谁能告诉我我在这里做错了什么?