如何在Angular组件中访问SCSS / SASS变量

Question

我必须找到一种在Angular5组件的HTML中访问SCSS变量（及其值）的方法，希望有人可以帮助我。

在我的variables.scss中，有一些变量，例如：

...
$primary-1: #cccccc;
$primary-2: #666666;
$primary-3: #000000;
...

假设我的调色板由这些颜色组成。

我还创建了一些Angular组件，用于重用表格，图表等。
这些组件使用ng2-charts / Chart.js。其中之一是LineChartComponent，我将用它来阐明我的问题。

...
<app-line-chart 
    height="500" 
    [hexColors]="['#ccccccc', '#666666','#000000']" 
    [datasetLabels]="..." 
    [datasets]="..."
    [axisLabels]="..."></app-line-chart>
...

如您所见，我可以设置一些hexColors。这些将在LineChartComponent中转换为RGBA颜色。

但是现在。。。说我的调色板在变化。
然后，我必须在variables.scss中以及在所有这些颜色通过不同组件传递的所有位置中更改颜色。

到目前为止，我还没有找到访问组件中变量的方法。我考虑过要创建一个在其中定义了这些颜色的全局打字稿文件，因此我只需要编辑两个位置，就可以得到以下内容：

variables.scss

...
$primary-1: #cccccc;
$primary-2: #666666;
$primary-3: #000000;
...

颜色变量

export const COLORS = Object.freeze({ 
    primary1: '#cccccc',
    primary2: '#666666',
    primary3: '#000000'
});

然后在需要颜色的组件中设置全局变量。

example.component.ts

import {COLORS} from '../globals/variables';
...
@Component({...})
export class SomeComponent {
    ...
    colors = COLORS;
    ...
}

然后将我组件的hexColors设置为此：

...
<app-line-chart 
    height="500" 
    [hexColors]="[colors.primary1, colors.primary2, colors.primary3]" 
    [datasetLabels]="..." 
    [datasets]="..." 
    [axisLabels]="..."></app-line-chart>
...

但是，当我的调色板更改时，我必须再次修改两个位置。
这对我来说听起来不合逻辑，我坚信应该有一种更好的方法，所以当我要替换颜色时，只需要编辑一个位置即可。
最好通过编辑SCSS，因为样式表（我认为）负责样式和着色。有谁可以分享他/她的想法？

编辑：amit77309提到这可能是Typescript（Angular2 ionic2）中访问SASS值（$ variables.scss中的$ colors）的副本 ，但是该解决方案似乎不起作用。
我不是在使用离子性离子，而是在寻找可能不是问题的解决方案。自定义属性未在bodyStyles的属性列表中列出，因此无法访问它们。

Answer 1

您无法直接从 typescript 或 html 访问 SASS 变量，但使用css 自定义属性很容易做到。

// get variable from inline style
element.style.getPropertyValue("--my-var");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-var");

// set variable on inline style
element.style.setProperty("--my-var", jsVar + 4);

请记住，在角度中将element指的是nativeElement。

链接的帖子 @amit77309 显示了一种可以更轻松地声明自定义属性以及 sass 变量的方法，但如果您发现它太复杂，您可以简单地将它们一起声明。只要将变量设置为自定义属性，您就可以在打字稿中访问它们并使其在模板中可用。

可以说，这确实是重复的，因为该答案确实解决了您的问题，但这是一种简化且更基本的方法，似乎正如您所说的那样，它太复杂了，您无法让它工作。也许您可以通过更多地了解其背后的基本机制来实现您的目标。