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;
...

color-variables.ts

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提到这可能与access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2) 重复，但该解决方案似乎不起作用。
我不是在使用离子，而是在寻找可能不是问题的解决方案。自定义属性未列在bodyStyles的属性列表中，因此无法访问它们。

Answer 1

您不能直接从打字稿或html访问SASS变量，但是使用css custom properties可以轻松实现。

// 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变量的方法，但是，如果发现它太复杂，可以简单地将它们一起声明。只要将变量设置为自定义属性，就可以在打字稿中访问它们，并使它们在模板中也可用。

这确实是重复的，因为答案确实可以解决您的问题，但这是一种简化且更基本的方法，似乎您表示它太复杂了，无法使用。也许您可以通过稍微了解其背后的机制来实现自己的目标。

如何在Angular Components

1 个答案: