离子-ngStyle

Question

在我的离子项目中，在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中正确引用此颜色？

Answer 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变量。