在 angular 的自定义指令中访问 CSS 变量的最佳方法答案

【问题标题】：Best way to access CSS Variable in custom Directive of angular在 angular 的自定义指令中访问 CSS 变量的最佳方法
【发布时间】：2020-06-27 15:27:52
【问题描述】：

我有一个关于.. 我们如何将下面的语句转换为 angular`s renderer2 的问题？

this.elementRef.nativeElement.style.setProperty( '--primary-color ' , '#455363' )

在选择黑色模式时，上面的语句正在将CSS变量更改为指令。与 Angular 一样，直接访问 DOM 并不是一个好习惯，这就是我们使用 renderer2 的原因。但我不知道如何将上述语句转换为 renderer2 以安全访问 DOM。

非常简单，谁能告诉我如何使用 renderer2 安全地更改指令中的 css-variable 或将 css-variable 转换为指令的最佳方法。

谢谢。

【问题讨论】：

只是一个建议，不要用角度改变css变量。设置样式并更改样式名称。为组件设置样式更容易。您甚至可以启用主题。这不是一个好方法
@MoHradA 你能给出一个关于主题的示例链接吗？您能否提供更多关于使用 angular 更改 css 变量的不好做法的详细信息？
check akveo.github.io/nebular/docs/design-system/… 这一切都是通过 mixin 和函数以及单个服务完成的
@MoHradA 谢谢你的建议！！我要实现的有点像这种类似的方法，但方式不同。您可以在此链接中查看我的小实现stackblitz.com/edit/…
@MoHradA 以我的方式，我正在使用指令。我们可以将此指令作为父包装器。一项主题更改服务。并让用户决定他们如何使用这个指令和服务。他们需要做的是首先，定义他们自己的可变配色方案，然后他们需要将该配色方案传递给服务方法changeTheme()。

标签： javascript css angular typescript

【解决方案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;

现在我们可以传递第四个参数2，这将有助于定义带有-样式变量的css-variable，没有2参数setStyle()将无法识别cas-variable。所以这实际上是我对我的问题的回答..

`this.renderer.setStyle(this.elementRef.nativeElement, `--primary-color`, '#455363' , 2 )`

【讨论】：

最好使用 RendererStyleFlags2 符号常量，而不是硬编码 2：this.renderer.setStyle(nativeElement, '--primary-color', '#455363' , RendererStyleFlags2.DashCase)

【解决方案2】：

我相信您正在寻找以下方面的东西：

constructor(private renderer: Renderer2, private elementRef: ElementRef) {}

ngOnInit() {
  this.renderer.setStyle(
    this.elementRef.nativeElement,
    '--primary-color',
    '#455363'
  );
}

【讨论】：

你确定这会起作用吗？由于 setStyle() 无法识别 --primary-color CSS 变量。
我不确定，不，我没有尝试过这种方式添加样式，但它会引发错误吗？
--primary-color 不是适当的 css 属性，因此 angular 不会使用 setStyle() 添加任何样式。
在setStyle() 上查看我的发现答案，我们必须传递第四个参数以使用- 样式访问css-variable。
很好的发现！已对您的答案投了赞成票，将在几个小时内删除我的答案，以便您首先看到此消息^^

【解决方案3】：

根据您的问题，我猜您想启用主题，所以这里的解决方案与您的问题没有直接关系，但可以让您更好地了解如何解决这个问题

.theme1{
  --primary-color: red;
}

.theme2{
  --primary-color: blue;
}

// inside component1
:host{
   background-color : var(--primary-color);
}

//inside the AppComponent 
<body[class]="isTheme1? 'theme1': 'theme2'">
 <component1></component1>
</body>

解释一下。每个 css 变量的范围都是其样式。这意味着如果 style1 应用于组件或父组件，则该组件内可用的值将从父/自身元素中读取

<!-- scoped to the body-->
<bod class="theme1">
    <div>
        <component1> </component1>
    </div>
    <div>
        <component1> </component1>
    </div>
</body>
<!-- scoped to parent div -->
<bod >
    <div class="theme1">
        <component1> </component1>
    </div>
    <div class="theme2">
        <component1> </component1>
    </div>
</body>

<!-- scoped to the component and mix and match  -->
<bod class="theme1">
    <div>
        <component1> </component1>
    </div>
    <div>
        <component1 class="theme2"> </component1>
    </div>
</body>

所以使用上面的代码，您的组件将有两种不同的颜色并排。你可能不想混搭，但我把它放在这里是为了表明变量的范围是基于父/自元素的。

nebular 做得更专业，但这就是整个想法

【讨论】：