如何在 ngStyle 中使用使用 Mixin $Variable？

Question

我在这里有一个 mixin 变量：

component.scss

$bg-selected-list-item: #1E62F1; 
$bg-list-item: #FFF;

如何在[ngStyle] 中使用上面的 mixin 变量：

component.html

<mat-list-item *ngFor="let OBJ of dataSOURCE" [ngStyle]="{'background-color': OBJ.is_selected ? $bg-selected-list-item : (OBJ.back_color || $bg-list-item) }">
</mat-list-item>

期待

案例1（如果选择了ListItem）：那么使用mixin变量$bg-selected-list-item作为列表项的背景色

案例 2（如果未选择 ListItem 并且如果 OBJ 设置了 back_color）

->然后使用OBJ.back_color作为列表项的背景色

案例 3（如果未选择 ListItem 并且如果 OBJ 设置了 NO back_color）

->然后使用mixin变量$bg-list-item作为列表项的背景色。

我面临以下问题

• 这两个 Mixin 变量颜色都没有应用于 ngStyle**

• 仅应用 OBJ.back_color**。

下面是答案（感谢@matirmv）

component.scss

$bg-selected-list-item: #1E62F1; 
$bg-list-item: #FFF;

.my-background-class{
  background-color:$bg-list-item;
}
.my-background-selected-class{
  background-color:$bg-selected-list-item;
}

component.html

<mat-list-item *ngFor="let OBJ of dataSOURCE" class="my-background-class" [ngStyle]="!OBJ.is_selected && {'background-color': OBJ.back_color}"
                [ngClass]="{'my-background-selected-class': OBJ.is_selected}">

Answer 1

不能在 html 模板中使用 Mixin 变量。由于它们是 scss 变量，因此您只能在 component.scss 文件中使用它们。

你要做的事情很简单：

创建一个使用你想要的 mixin 的 css 类：

$bg-selected-list-item: #1E62F1; 
$bg-list-item: #FFF;

.my-background-class{
  background-color:$bg-list-item;
}
.my-background-selected-class{
  background-color:$bg-selected-list-item;
}

然后转到您的 component.html 文件并使用 [ngClass]（不是 ngStyle，它仅适用于 css 属性）：

<mat-list-item *ngFor="let OBJ of dataSOURCE" class="my-background-class" [ngClass]="{'my-background-selected-class': OBJ.is_selected">
</mat-list-item>

如您所见，默认类将是 .my-background-class，如果选择了列表项，则会添加 .my-background-selected-class 以更改背景颜色。

就是这样！ ;)

Answer 2

SASS 变量是编译时构造而不是运行时属性。 Angular 会将您的模板 html 转换为预编译的 (ngFactory) javascript 类 (AOT)，以减少将编译器与您的应用程序代码一起发送。这会带来更好的性能和更快的渲染。

因此，您需要在运行时在Angular编译组件中定义ng-style可以引用的css类。