Question

我在这里有一个mixin变量：

component.scss

npm i --zmq-external

如何在$bg-selected-list-item: #1E62F1; $bg-list-item: #FFF;]中使用上面的mixin变量：

component.html

[ngStyle

期望

案例1 （如果选择了ListItem）：然后使用混合变量<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>作为列表项的背景颜色

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

->然后使用$bg-selected-list-item作为列表项的背景颜色

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

->然后使用混合变量OBJ.back_color作为列表项的背景色。

我正面临以下问题

这两种Mixin变量颜色均未应用于ngStyle **
仅应用OBJ.back_color **。

以下是答案（感谢@matirmv）

component.scss

$bg-list-item

component.html

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

Answer 1

SASS变量是编译时结构，而不是运行时属性。 Angular会将您的模板html转换为预编译的（ngFactory）javascript类（AOT），以减轻您的应用程序代码随编译器一起提供的麻烦。这样可以带来更好的性能和更快的渲染。

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

Answer 2

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]（不是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来更改背景颜色。

就是这样！ ;）

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

2 个答案: