angular 中的插值样式将不起作用（Ionic 5）

Question

我正在 Ionic 5 中尝试这个并且它有效：

<ion-content style="--background: yellow;">

但是我想动态地改变颜色。我已经尝试过但没有成功：

<ion-content [ngStyle]="{'--background': backgroundColor}">

我找不到错误。

Answer 1

NgStyle 不支持 css 个变量。
这是一个“已知”限制并且已经存在了很长一段时间：
https://github.com/angular/angular/issues/9343

但是，即使有些难看，也有解决方法。我的首选是：

<ion-content [attr.style]="sanitizer.bypassSecurityTrustStyle('--background: ' + backgroundColor)">

// you will need a DomSanitizer instance in your component
constructor(private sanitizer: DomSanitizer) {}