作者:该改改小心眼_222 | 来源:互联网 | 2022-12-20 11:46
我必须找到一种在Angular5组件的HTML中访问SCSS变量(及其值)的方法,希望有人可以帮助我。
在我的variables.scss中,有一些变量,例如:
...
$primary-1: #cccccc;
$primary-2: #666666;
$primary-3: #000000;
...
假设我的调色板由这些颜色组成。
我还创建了一些Angular组件,用于重用表格,图表等。
这些组件使用ng2-charts / Chart.js。其中之一是LineChartComponent,我将用它来阐明我的问题。
...
...
如您所见,我可以设置一些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设置为此:
...
...
但是,当我的调色板更改时,我必须再次修改两个位置。
这对我来说听起来不合逻辑,我坚信应该有一种更好的方法,所以当我要替换颜色时,只需要编辑一个位置即可。
最好通过编辑SCSS,因为样式表(我认为)负责样式和着色。有谁可以分享他/她的想法?
编辑:amit77309提到这可能是Typescript(Angular2 ionic2)中访问SASS值($ variables.scss中的$ colors)的副本
,但是该解决方案似乎不起作用。
我不是在使用离子性离子,而是在寻找可能不是问题的解决方案。自定义属性未在bodyStyles的属性列表中列出,因此无法访问它们。