如何在 [ngClass] 中混合条件和串联

Question

我有一个 div 需要在 mouseenter 上设置 blurred/reduced 不透明度。

我创建了 2 个 css class，名为 .blur 和 .less-opacity

Component.css

.blur {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

.less-opacity {
    opacity: 0.5;
}

---

我在 TS 中有变量可以从模糊切换到非模糊。还有 Input() 个变量，其中之一是 FontAwesome 图标的名称。

Component.ts

...

  @Input() iconName: string; //Contains for example 'bed'
  @Input() subTitle: string;
  @Input() info: string;
  private isVisible: boolean = true;
  private isBlurred: boolean = false;

...

  switchVisible() {
    this.isVisible = !this.isVisible;
    this.isBlurred = !this.isBlurred;
  }

---

我不知道如何正确编码 [ngClass] 以同时满足 .blur 和 .less-opacity 的条件，同时连接 FontAwesome 图标名称。

Component.html

<div class="vignette d-flex flex-column justify-content-center align-items-center" (mouseenter)="switchVisible()" (mouseleave)="switchVisible()">
    <i [ngClass]="{ 'blur' : isBlurred, 'less-opacity' : !isVisible, 'fa-' + iconName : true }" class="vignette-icon fal fa-3x"></i>
    <p [ngClass]="{ 'blur' : isBlurred, 'less-opacity' : !isVisible}" class="vignette-subtitle px-3">{{ subTitle }}</p>
    <p class="vignette-info px-3"></p>
</div>

如你所见，我尝试了以下方法 [ngClass]="{'my-class': expression, 'my-class2': expression }"

我没有出现控制台错误，但图标 class 设置不正确，导致出现错误图标。

这是触发 mouseenter 事件后的结果

.blur 和 .less-opacity class 已正确添加到 <p>，但 <i> 未正确设置。

我的问题是：我应该如何编码 [ngClass] <i> 需要在 class 名称中连接 ?

Answer 1

您可以使用 setter 将 'fa-' 手动添加到 @Input()

例如： 在 Component.ts

中添加一个新变量

_iconName: string;
@Input()
set iconName(iconName: string) {
  this._iconName= 'fa-' + iconName;
}

然后在 Component.html 中使用 _iconName 变量而不是 iconName。

Answer 2

为了实现这一点，我必须找到一种解决方法，只要我找不到任何方法使其仅使用一个 [ngClass] 即可正常工作。

我已将 <i> 包裹在 span 中，并将 .blurred 和 .less-opacity 应用于 span。此外，我为 <i> 标签设置了一个简单的 [ngClass]，并根据需要设置了 iconName。

Component.html

...
<span class="vignette-icon" [ngClass]="{ 'blur' : isBlurred, 'less-opacity' : !isVisible }">
 <i [ngClass]="'fa-3x fal ' + iconName"></i>
</span>
...

Component.ts

...
@Input() iconName: string;

...

ngOnInit() {
 this.setIconName(this.iconName);
}

...

setIconName(iconName: string) {
 if(!iconName.includes('fa-')) {
   this.iconName = 'fa-' + iconName;
 }
}

...

这样很好用！