angular - 要么我错误地使用了 Angular Renerer2，要么它已损坏。有人能弄清楚吗？

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}

以上方法均无效。

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

谁能告诉我我在这里做错了什么？

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