如何在 ngStyle 中使用 Use 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>

预期

情况一（如果选择了ListItem）：然后使用mixin变量$bg-selected-list-item作为列表项的背景色

情况 2（如果未选择 ListItem & 如果 OBJ 已设置 back_color）

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

情况 3（如果未选择 ListItem & 如果 OBJ 设置了 NO back_color）

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

我面临以下问题

两者均未在 ngStyle 中应用 Mixin 变量颜色**
仅应用 OBJ.back_color**。

BELOW is the ANSWER (thanks to @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

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

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

Answer 2

Mixin 变量不能在 html 模板中使用。因为它们是 scss 变量，所以你只能在你的 component.scss 文件中使用它们。

你要做的事情很简单:

创建一个 css class，它使用您想要的混合，例如：

$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>

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

就是这样！ ;)

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

How to use Use Mixin $Variable in ngStyle?

angular-material2

angular