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

Question

我有一个 div 需要在 mouseenter 上模糊/降低不透明度.

我创建了 2 个名为 .blur 的 css 类和 .less-opacity

组件.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 图标的名称。

组件.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 图标名称。

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

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

这是我在 mouseenter 时得到的结果事件被触发

.blur和 .less-opacity类已正确添加到 <p> ，但是 <i>没有正确设置。

我的问题是:我应该如何编码 [ngClass] 为 <i> 哪个需要在类名中串联？

Answer 1

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

例如:在您的 Component.ts 中添加一个新变量

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

然后在 Component.html 中使用 _iconName 变量代替 iconName。