从角度5控制CSS变量

是否有任何方法可以使用角度方法控制在组件根级别定义的CSS变量？在JavaScript中，当我们在根级别设置时，我们有

document.documentElement.style.setProperty（）

在angular中，我们可以使用“：host”在组件内声明用于全局访问的css变量吗？或者我们需要使用像“：：ng deep:root”这样的东西吗

以下问题仍然没有答案：
是您可以在根范围中设置变量：

:root {
  --main-color: red
}

是的，您可以使用
：host
选择器来选择构件所在的目标图元

:host {
  display: block;
  border: 1px solid black;
}

您还可以使用，
：主机上下文
以组件的任何祖先为目标。：host-context（）选择器在组件宿主元素的任何祖先中查找CSS类，直到文档根

:host-context(.theme-light) h2 {
  background-color: #eef;
}

注意：
：：ng deep
或
/deep/
或
>>
已被弃用

请在此处阅读更多信息：

只是一个补充信息。
它同时在“：root”和“：host”中工作
我们可以通过以下方式为其设置值：

构造函数（私有elementRef:elementRef）{}
然后
this.elementRef.nativeElement.style.setProperty（'--color'，red'）
是的，您可以。像这样：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <h1 style="color: var(--color)"> Hello world </h1>
  `,
  styles: [
    `:host { --color: red; }`
  ]
})
export class AppComponent  {}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
你好，世界
`,
风格：[
`：host{--color:red；}`
]
})
导出类AppComponent{}


您可能还对阅读以下答案感兴趣
每个组件的最佳选择，例如不使用：：ng deep的背景色（为所有子项设置背景色）

导入以下内容

import {ElementRef} from '@angular/core';

在构造函数中声明elementref

 constructor(private elementRef: ElementRef) {}

然后调用函数ngAfterViewInit（）

这会将bg设置为白色，但您也可以将其替换为十六进制颜色，因此您可以对每个组件执行此操作。
在组件中使用css变量（带有视图封装）的最具建设性和模块化的方式如下：

// global css
:root {
   --main-color: red
   --alt-color: blue
}

// inside component component css
::ng-deep :root {
   --specific-css-var: var(--main-color)
}
:host {
   background-color: var(--specific-css-var)
}
:host(.conditional-class) {
   --specific-css-var: var(--alt-color)
}

注意：尽管
：ng deep
已被弃用，但它尚未被替换（也没有替换），因为可以在多个
中读取，是否可以在主机或主机上下文中为CSS变量设置值，并在*.ts文件中访问它们？bcz我的目的是了解CSS变量访问，特别是.ok。我会尝试一下，然后重新开始。非常感谢您的更新。@ashfaq.p，您是一个救生员！我不打算去碰那块石头。我想通过控制单个CSS变量来设置多个DOM的CSS属性的动画。在CSS上，您可以同时调用对象和id，如下所示：h4#firstname{background color:red；}或class h4.classname{background color:red}w.r.t您的示例中，var（--color）的范围将在。如果我有多个标记，那么我需要在父div中定义/移动所有h1，并在父div上声明变量。因此，我们可以直接在组件：主机范围中声明它吗？但是感谢您给我指出。它向我展示了访问声明变量的方法。但是仍然在component:host作用域中寻找声明CSS变量。您可以将
h1{color:var（--color）；}
添加到组件样式中，然后将其作用域设置为整个组件。
// global css
:root {
   --main-color: red
   --alt-color: blue
}

// inside component component css
::ng-deep :root {
   --specific-css-var: var(--main-color)
}
:host {
   background-color: var(--specific-css-var)
}
:host(.conditional-class) {
   --specific-css-var: var(--alt-color)
}