Angular - 如何通过组件中的 javascript 获取 style.scss 中的 SCSS 变量？答案

【问题标题】：Angular - How to get SCSS variable in style.scss by javascript in a component?Angular - 如何通过组件中的 javascript 获取 style.scss 中的 SCSS 变量？
【发布时间】：2020-11-03 11:26:56
【问题描述】：

我有一个使用 Angular Material 的 Angular 9 应用程序，它有 2 个主题（深色和浅色）。它们在 style.scss 文件中是这样定义的：

$rasd-dark-text-color: mat-palette($mat-grey, 300);
$rasd-light-text-color: mat-palette($mat-grey, 800);

.rasd-dark {
   --text-color: #{mat-color($rasd-dark-text-color)};
}

.rasd-light {
   --text-color: #{mat-color($rasd-light-text-color)};
}

为了给应用设置主题，我只是将它设置为body元素的一个类：

<body class="mat-typography rasd-dark">
    <app-root></app-root>
</body>

我有一个小的 Angular 组件，它需要从 --test-color 中获取值作为 Hex color，这取决于哪个（应用深色或浅色主题） body 元素上）。

export class ChartComponent implements OnInit {
    textColor: string;
    
    ngOnInit(): void {
      // (!!!) How can I set the value for textColor from --test-color in SCSS?
      // e.g: after setting, the value of textColor is #001100
    }
}

【问题讨论】：

标签： javascript angular sass angular-material

【解决方案1】：

--text-color 这是自定义 css 变量或属性，因此如果您想从 angular 设置变量，请执行以下操作：- `

 export class ChartComponent implements OnInit {
  textColor: string;

  ngOnInit(): void {
     this.textColor = '#ffffff'; // any colour  
   }
}`

因此将值分配给类似这样的文本颜色属性并在 html 中使用，如下所示：-

<body class="mat-typography rasd-dark">
<app-root *ngStyle="{'--text-color':textColor}"></app-root>

所以使用这个 *ngStyle 你可以将 angular 组件属性设置为 css 自定义变量。

希望它会有所帮助。

【讨论】：

【解决方案2】：

我通过创建服务类找到了一种方法

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

@Injectable({
  providedIn: 'root'
})
export class CssService {

  DARK_THEME = "ras-dark";
  LIGHT_THEME = "ras-light";

  constructor() { }

  /**
   * Get the set theme (dark / light) from body element's class list
   */
  getThemeName(): string {
    const classNames = document.body.className.split(' ');
    let themeName = this.DARK_THEME;
    classNames.forEach(element => {
      if (element === this.LIGHT_THEME) {
        themeName = this.LIGHT_THEME;
        return;
      }
    });

    return themeName;
  }

  /**
   * Get an attribute value of a theme class (e.g: --text-color of ras-dark class)
   */
  getAttributeValue(attributeName):string {
    const themeName = this.getThemeName();
    const element = document.getElementsByClassName(themeName)[0];
    const attributeValue = window.getComputedStyle(element,null).getPropertyValue(attributeName);

    return attributeValue;
  }
}

在组件中，我可以像这样得到计算出来的颜色

constructor(private cssService:CssService) { }

ngOnInit(): void {
    const fontColor = this.cssService.getAttributeValue("--text-color");
}

【讨论】：