Ionic - 来自 ngStyle 中的 SASS 文件的自定义颜色答案

【问题标题】：Ionic - custom colors from SASS file in ngStyleIonic - 来自 ngStyle 中的 SASS 文件的自定义颜色
【发布时间】：2019-01-03 21:11:20
【问题描述】：

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

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

在我的 .css 文件中，我可以像这样使用第二组颜色：

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

但如果我想在[ngStyle]="{'color' : 'color($buttonColors, sampleRed, base)'}" 中使用上面的代码 - 这将不起作用。

就我而言，我想在 ngStyle 中专门使用这种颜色。如何在ngStyle 中正确引用此颜色？

【问题讨论】：

自预编译后，您无法从代码中访问 sass 变量，它会变成纯 css。有一些变通方法可以实现这些目标，但在我看来，这并不值得。如果你还想看，看看这个帖子：stackoverflow.com/questions/40418804/…
@dAxx_ 我注意到你发给我的主题是关于 .ts 文件的。但是，我想在元素的[ngStyle] 中访问我的 .html 文件中的该变量。这也是不可能的吗？
如前所述，应用程序编译后您无法访问 sass 变量。由于 [ngStyle] 是动态的，它会在应用程序编译后尝试获取变量。您可以将值直接硬编码到模板中，或者在您的打字稿中创建一个引用并使用它。
在 Angular 的存储库中查看此问题 [github.com/angular/angular-cli/issues/1253]，其中一种解决方案是使用 sass-vars-loader (github.com/epegzz/sass-vars-loader) 将 sass 编译为 TS，然后将其包含在组件中。看起来有点乱，但如果你真的需要这个功能，这可能是一个解决方案。

标签： angular typescript ionic-framework colors sass

【解决方案1】：

在组件文件中：

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>

它对我有用。但是你必须使用 ionic 4 CSS 变量。

【讨论】：