【问题标题】:Control CSS variable from Angular 5从 Angular 5 控制 CSS 变量
【发布时间】:2020-07-05 19:49:50
【问题描述】:

有没有办法使用 Angular 方法来控制在组件的根级别定义的 CSS 变量?在 JavaScript 中,当我们设置在根级别时,我们有 document.documentElement.style.setProperty()

在 Angular 中,我们可以使用 ':host' 来声明 css 变量以在组件内进行全局访问吗?还是我们需要使用类似'::ng-deep :root'的东西?

以下问题也仍未得到解答: Angular: Use Renderer 2 to Add CSS Variable

【问题讨论】:

    标签: css angular


    【解决方案1】:

    是的,您可以在根范围内设置变量:

    :root {
      --main-color: red
    }
    

    是的,您可以使用 :host 选择器来定位组件所在的元素。

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

    您还可以使用:host-context 来定位组件的任何祖先。 :host-context() 选择器在组件宿主元素的任何祖先中查找 CSS 类,直到文档根。

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

    注意:::ng-deep/deep/>>> 已被弃用。

    在此处了解更多信息:special css selectors in angular

    只是一个附加信息。 它在 ':root' 和 ':host' 中都有效 我们可以通过以下方式为它们设置值:

    constructor(private elementRef: ElementRef) { } 然后 this.elementRef.nativeElement.style.setProperty('--color', 'red');

    【讨论】:

    • 是否可以在主机或主机上下文中设置 CSS 变量的值并在 *.ts 文件中访问它们? bcz 我的目的是具体了解 CSS 变量访问。
    • 好的。会尝试一下并重新开始。非常感谢您的更新。
    • @ashfaq.p,你是救命稻草!
    【解决方案2】:

    在组件中使用 css 变量的最具建设性和模块化的方式(使用 viewEncapsulation)如下:

    // 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 已被弃用,但它还没有被替换(并且没有替换),可以在几个discussion like this 中阅读

    【讨论】:

      【解决方案3】:

      不使用 ::ng-deep(为所有子项设置 bg)对每个组件(例如背景颜色)的最佳选择

      导入以下内容

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

      在构造函数中声明元素引用

       constructor(private elementRef: ElementRef) {}
      

      然后调用函数ngAfterViewInit()

      ngAfterViewInit(){
          this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = ' white';
      }
      

      这会将 bg 设置为白色,但您也可以将其替换为十六进制颜色,因此您可以对每个组件执行此操作

      【讨论】:

      • 我不打算接触 DOM。我想通过控制单个 CSS 变量来为多个 DOM 的 CSS 属性设置动画。朝那个方向有可能吗?
      • 在 CSS 上你可以像这样同时调用对象和 id:h4#firstname { background-color:red; } 或类 h4.classname{ 背景颜色:红色 }
      猜你喜欢
      • 2018-07-01
      • 2016-02-17
      • 1970-01-01
      • 1970-01-01
      • 2016-04-20
      • 1970-01-01
      • 2016-05-22
      • 2021-11-30
      相关资源
      最近更新 更多