我必须找到一种方法来访问我的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颜色 .
But now... 让我们说我的调色板正在改变 .
然后,我必须在 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,因为样式表(在我看来)负责风格和着色 . 有没有人可以分享他/她的想法?
Edit :amit77309提到这可能是access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2)的副本,但该解决方案似乎不起作用 .
我不是在使用离子,而是在寻找可能不是问题的解决方案 . 自定义属性未列在bodyStyles的属性列表中,因此无法访问它们 .