我需要找到一种方式在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>
...
您可以看到,我可以设置一些十六进制颜色。这些颜色将在LineChartComponent中转换为RGBA颜色。
但是,假设我的颜色调色板正在更改。那么我就不仅需要在variables.scss中更改我的颜色,还需要在所有通过不同组件传递的这些颜色的地方进行更改。
到目前为止,我还没有找到一种访问我的组件内变量的方法。我考虑创建一个全局的typescript文件,在其中也定义这些颜色,这样我只需要编辑两个位置,就可以得到如下内容:
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提到这可能是访问SASS值($colors from variables.scss)在Typescript(Angular2 ionic2)的重复问题,但是那个解决方案似乎不起作用。我没有使用ionic,但是从解决方案中可以看出这可能不是问题所在。自定义属性未列在bodyStyles的属性列表中,因此无法访问。