angular - 角度插值样式不起作用（Ionic 5）

Question

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

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

但是我想动态地改变颜色。我试过这个没有成功：

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

我找不到错误。

标签： angularionic5

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) {}