Question

使用普通的旧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}

以上都不起作用。

这是角度核心中存在的方法：

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与setAttribute）。

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

要么我使用Angular Renerer2错了，要么它坏了。有人能搞清楚吗？

2 个答案: