带渲染器的Angular 2+ CSS自定义属性（变量）

Question

我正在尝试将Vanilla JavaScript代码转换为Angular 2+。

在Javascript中，我有这样的声明：

document.documentElement.style.setProperty(`--${cssVariableName}`, value);

在Angular中，我发现复制上述语句的唯一方法是：

renderer.setProperty(document.documentElement, 'style', `--${cssVariableName}: ${value}`);

问题：如果我有多个自定义属性在不同时间动态设置（--cvVariable1， - cvVariable2 ...）。 Angular Renderer将覆盖style属性，而不是附加到style属性。

可以使用渲染器来实现此功能吗？如果没有，是否有一种在Angular中使用CSS自定义属性的首选方法？谢谢！

Answer 1

尝试使用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);

Answer 2

你可以使用的是[ngStyle]。您不需要使用渲染器。

在控制器中，您可以拥有一个具有要应用的css属性的对象。

喜欢这个。

const dir1: DirectoryEntry = await /* ... getDirectory(path1) */;
const dir2: DirectoryEntry = await /* ... getDirectory(path2) */;
dir1.moveTo(dir2, dir1.name, resolve, reject);

然后在你的html中你可以使用ngStyle里面的那些属性来应用这些属性。

props = {'color': 'red', 'font-size': '18px'};

希望它有所帮助。

Answer 3

尝试使用@Column方法

<div class="elementor-container elementor-column-gap-no">
            <div class="elementor-row">
            <div data-id="27de853d" class="elementor-element elementor-element-27de853d elementor-column elementor-col-11 elementor-top-column" data-element_type="column">
        <div class="elementor-column-wrap">
                <div class="elementor-widget-wrap">
                    </div>
        </div>
    </div>
            <div data-id="52e1a94f" class="elementor-element elementor-element-52e1a94f elementor-column elementor-col-11 elementor-top-column" data-element_type="column">
        <div class="elementor-column-wrap">
                <div class="elementor-widget-wrap">
                    </div>
        </div>
    </div>
            <div data-id="2968abde" class="elementor-element elementor-element-2968abde elementor-column elementor-col-11 elementor-top-column" data-element_type="column">
        <div class="elementor-column-wrap elementor-element-populated">
                <div class="elementor-widget-wrap">
            <div data-id="f6e51ca" class="elementor-element elementor-element-f6e51ca menu-item elementor-widget elementor-widget-heading" id="menuu" data-element_type="heading.default">
            <div class="elementor-widget-container">
        <h4 class="elementor-heading-title elementor-size-default"><a href="#contact"><p dir="rtl">צור קשר<span style="font-family: Heebo, sans-serif; font-size: 20px; font-weight: 500;"></span></p></a></h4>     </div>
            </div>
                    </div>
        </div>
    </div>
            <div data-id="43e9a7ba" class="elementor-element elementor-element-43e9a7ba elementor-column elementor-col-11 elementor-top-column" data-element_type="column">
        <div class="elementor-column-wrap elementor-element-populated">
                <div class="elementor-widget-wrap">
            <div data-id="a306aa1" class="elementor-element elementor-element-a306aa1 menu-item elementor-widget elementor-widget-heading" id="menuu" data-element_type="heading.default">
            <div class="elementor-widget-container">
        <h4 class="elementor-heading-title elementor-size-default"><a href="#thesolutions"><p dir="rtl">פתרונות<span style="font-family: Heebo, sans-serif; font-size: 1.2em; font-weight: 500; background-color: rgba(255, 255, 255, 0);"></span></p></a></h4>     </div>
            </div>
                    </div>
        </div>
    </div>
            <div data-id="462f96df" class="elementor-element elementor-element-462f96df elementor-column elementor-col-11 elementor-top-column" data-element_type="column">
        <div class="elementor-column-wrap elementor-element-populated">
                <div class="elementor-widget-wrap">
            <div data-id="426ca1f7" class="elementor-element elementor-element-426ca1f7 menu-item elementor-widget elementor-widget-heading" id="menuu" data-element_type="heading.default">
            <div class="elementor-widget-container">
        <h4 class="elementor-heading-title elementor-size-default"><a href="#fit"><p dir="rtl">למי זה מתאים?<span style="font-family: Heebo, sans-serif; font-size: 1.2em; font-weight: 500; background-color: rgba(255, 255, 255, 0);"></span></p></a></h4>        </div>
            </div>
                    </div>
        </div>
    </div>
            <div data-id="573bf04" class="elementor-element elementor-element-573bf04 elementor-column elementor-col-11 elementor-top-column" data-element_type="column">
        <div class="elementor-column-wrap elementor-element-populated">
                <div class="elementor-widget-wrap">
            <div data-id="209f237" class="elementor-element elementor-element-209f237 menu-item elementor-widget elementor-widget-heading" id="menuu" data-element_type="heading.default">
            <div class="elementor-widget-container">
        <h4 class="elementor-heading-title elementor-size-default"><a href="#aboutus"><p dir="rtl">אודות<span style="font-family: Heebo, sans-serif; font-size: 1.2em; font-weight: 500; background-color: rgba(255, 255, 255, 0);"></span></p></a></h4>        </div>
            </div>
                    </div>
        </div>
    </div>
            <div data-id="255c8355" class="elementor-element elementor-element-255c8355 elementor-column elementor-col-11 elementor-top-column" data-element_type="column">
        <div class="elementor-column-wrap elementor-element-populated">
                <div class="elementor-widget-wrap">
            <div data-id="2e919436" class="elementor-element elementor-element-2e919436 menu-item elementor-widget elementor-widget-heading" id="menuu" data-element_type="heading.default">
            <div class="elementor-widget-container">
        <h4 class="elementor-heading-title elementor-size-default"><a href="#regulation"><p dir="rtl">מהי רגולציה?<span style="font-family: Heebo, sans-serif; font-size: 20px; font-weight: 500;"></span></p></a></h4>     </div>
            </div>
                    </div>
        </div>
    </div>
            <div data-id="6d524b7b" class="elementor-element elementor-element-6d524b7b elementor-column elementor-col-11 elementor-top-column" data-element_type="column">
        <div class="elementor-column-wrap">
                <div class="elementor-widget-wrap">
                    </div>
        </div>
    </div>
            <div data-id="3063bb4b" class="elementor-element elementor-element-3063bb4b elementor-column elementor-col-11 elementor-top-column" data-element_type="column">
        <div class="elementor-column-wrap">
                <div class="elementor-widget-wrap">
                    </div>
        </div>
    </div>
                    </div>
        </div>

#menuu {
  text-decoration: none;
  color: #0B1B70;
  -webkit-transition: border 200ms ease-out;
  -moz-transition: border 200ms ease-out;
  -o-transition: border 200ms ease-out;
  transition: border 200ms ease-out;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  padding: 3px 0;
  height: 30px
}

#menuu:hover,
#menuu:focus,
#menuu:active {
  border-bottom: 2px solid #61f6ff;
  border-top: 2px solid #61f6ff;
}

.active {
  border-bottom: 2px solid #61f6ff !important;
  border-top: 2px solid #61f6ff !important;
}