无论我使用角Renerer2错了，或者是坏了。任何人都可以算出来？

Question

使用普通的旧的JavaScript，这是如此简单：

myElement.style.setProperty('property', 'value', 'important');

在棱角分明，没有这么多。我做了一个详尽的搜索绝对无处不在，无法找到如何做到这一个简单的例子，所以我在这里提出的问题。

无论是在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}

无上述作品。

这是因为它在方芯的存在的方法：

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

谁能告诉我什么，我做错了什么？

Answer 1

这感觉就像你要么需要使用渲染器标志的两个或添加!important字符串值来代替。

const flags = RendererStyleFlags2.DashCase | RendererStyleFlags2.Important;
this.renderer.setStyle(this.elRef.nativeElement.querySelector('.my-div'), 'color', '#fff', flags);

要么

this.renderer.setStyle(this.elRef.nativeElement.querySelector('.my-div'), 'color', '#fff!important');

Answer 2

另一个解决方案可以是覆盖与style的renderer属性，例如是这样的：

this.renderer.setAttribute(myElementHere, 'style', 'color: #FFF !important');

但警告，它会删除/覆盖已有的内嵌样式。对于这种情况，你可以读取当前style属性的值，并追加/它，预先准备的值，该值将被覆盖。

请注意，此解决方案是一个有点，我会说，哈克，但如果你能处理它，你是好去。

我没有做性能测试或类似的东西（setStyle VS setAttribute）。

这仅仅是完成覆盖内联样式的可能性。