angular - 如何在 ngStyle 中使用 Use Mixin $Variable？

Question

我在这里有一个 mixin 变量:

组件.scss

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

如何在此处的 [ngStyle] 中使用上述 mixin 变量:

组件.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**。

BELOW is the ANSWER (thanks to @matirmv)

组件.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;
}

组件.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

Mixin 变量不能在 html 模板中使用。由于它们是 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] (不是仅适用于 css 属性的 ngStyle):

<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 以更改背景颜色。

就是这样! ;)