如何在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);

請記住，在angular element中將引用nativeElement。

@ amit77309鏈接的鏈接顯示了一種使您可以更輕松地聲明自定義屬性以及sass變量的方法，但是，如果發現它太復雜，可以簡單地將它們一起聲明。 只要將變量設置為自定義屬性，就可以在打字稿中訪問它們，並使它們在模板中也可用。

可以肯定的是，這確實是重復的，因為答案確實解決了您的問題，但這是一種簡化且更基本的方法，似乎您表示它過於復雜且無法正常工作。 也許您可以通過更多地了解其背后的機制來實現目標。