angular - ionic -ngStyle中SASS文件中的自定义颜色

在我的离子项目中，在我的src/theme/variables.scss中，在$colors组下面，我有另一组颜色，如下所示：

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);
$buttonColors: (
  sampleRed: #A92A0E,
  sampleBlue:  #162C60
);

在.css文件中，我可以使用第二组颜色，如下所示：

.element {
  color: color($buttonColors, sampleRed, base);
}

但是如果我想在$buttonColors中使用上面的代码，这将不起作用。
在我的例子中，我想在ngstyle中使用这种颜色。如何在[ngStyle]="{'color' : 'color($buttonColors, sampleRed, base)'}"中正确引用此颜色？

最佳答案

在组件文件中：

import {Sanitizer} from '@angular/core';

export class MyCass {
      sanitizer: Sanitizer;
      myColor = '#444444';

constructor(_sanitizer: Sanitizer) {
        this.sanitizer = _sanitizer;
    }

在HTML文件中：

<ion-title [attr.style]="sanitizer.bypassSecurityTrustStyle('--color: ' + myColor)"></ion-title>

这对我有效。
但是你必须使用Ionic4CSS变量。

关于angular - ionic -ngStyle中SASS文件中的自定义颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51546171/