Angular 7 - 多个类（空格）导致 ngClass 失败答案

【问题标题】：Angular 7 - multiple classes (spaces) causes ngClass to failAngular 7 - 多个类（空格）导致 ngClass 失败
【发布时间】：2022-03-01 00:04:17
【问题描述】：

许多前端框架通过在其 CSS 样式前加上另一个类来封装其 CSS 样式。

例如引导程序：btn btn-primary 其中btn 是前缀。

如果我有条件地在[ngClass] 中应用它，角度会中断：

<div [ngClass]="{'btn btn-primary': booleanVar, 'btn btn-danger': !booleanVar}"></div>

但是，这可以通过像这样提取公共命名类来轻松解决：

<div class="btn" [ngClass]="{'btn-primary': booleanVar, 'btn-danger': !booleanVar}"></div>Voilà，我们的条件中不再有任何空格，并且 Angular 批准了。

现在有一些上下文。让我们尝试将其应用于Font Awesome，它们的前缀可以找到here。

Style       Prefix  Example 
Solid       fas     <i class="fas fa-igloo"></i>    
Regular     far     <i class="far fa-igloo"></i>    
Light       fal     <i class="fal fa-igloo"></i>    
Brands      fab     <i class="fab fa-font-awesome"></i>

第一个问题：是否可以在条件查询中使用空格？如何？

第二个问题：（如果第一个问题是不可能的）我将如何解决 前缀不再是静态的情况（如 Font Awesome 的情况） ?

【问题讨论】：

你找到解决办法了吗？
@Bozhinovski 是的，我做到了，不幸的是现在不记得了（几年前我离开了公司）。认为我用 ts 解决方案解决了。
我遇到了确切的问题，哈哈，不敢相信 ngClass 不接受多个类。无论如何，谢谢伙计
是的，我知道，我记得我也很沮丧。我有一个想法，你可以将最终类输出包装为函数的返回值。试试看！ :)

标签： css angular font-awesome font-awesome-5

【解决方案1】：

更新，我检查并使用空格很好。

所以这个

<div [ngClass]="{'btn btn-primary': booleanVar, 'btn btn-danger': !booleanVar}></div>

应该可以。

你也可以使用这种格式；

[ngClass]="booleanVar ? 'btn-primary': 'btn-danger'"

【讨论】：

[ngClass]="{ booleanVar ? 'btn-primary': 'btn-danger'} 不是正确的对象。
@trichetriche，它不使用括号，而是在引号内
我知道，但您确实使用了括号。保持反对票，因为您的解决方案实际上并没有提供解决方案，它只会模仿问题。
SOF 的好处是你有编辑的历史。所以不，我没有在你编辑它时投反对票。我投了反对票，然后发表了评论，然后您删除了评论并对其进行了编辑；最后用你的一个回答我的评论。无论如何，这个答案似乎可以接受，我正在删除我的反对票！
@trichetriche，我没有说你在我编辑时投了反对票。你先投了反对票，你发表了评论，然后我删除了。我完全同意。我说我正在检查语法是对是错，然后才知道它是错的

【解决方案2】：

你一个班一个班地做：

[ngClass]="{'btn': true, 'btn-primary': booleanVar, 'btn-danger': !booleanVar}"

【讨论】：

但是...正如我在问题中提到的...前缀不是静态的，这就像问题的全部要点。我什至为您刚刚回答的内容提供了一个示例。
@Joel 我的回答的重点是你逐个班级做。所以你也可以按前缀来做。
不知道你是不是在玩傻或有目的，所以我会一起玩这个：{'fas': conditionOne, 'far': conditionTwo, 'fa-igloo': conditionThree }。一个接一个。跨度>
我只使用了true，因为这是您提供的示例，而btn 恰好在这两种情况下，false || true === true。
我不确定你现在是否在拖钓。想象一下扩大规模，您是否真的提出这是最佳答案？在 aJS 这工作得很好。所以，我想知道a7中的正确方法是什么。想象一下，如果想要动态添加类，那么这种方法会......好吧，说得好听点......不是最优的。

【解决方案3】：

今天我在一个 Angular 7 项目中遇到了这个确切的问题，经过一些修补后，我发现了问题所在。 通常可以使用 ngClass 添加多个以空格分隔的类，但如果同一个类出现在多个条件中，如果其中一个条件为假，它将被删除。例如：

<span [ngClass]="{
    'fas fa-book': val === 1, 
    'fas fa-eye': val === 2, 
    'far fa-star': val === 3 }">
</span>

val === 3 没有问题时，val === 1 时，fas 类将被删除，而val === 2 时，fas 类将被删除，然后再次添加回来，这样它就可以正常工作了。

我怀疑它们只是按顺序执行，如果条件为真，则添加元素的类，但如果条件为假，无论如何它们都会被删除，我没有亲眼看到 Angular 7 代码但我所有的测试都指向这一点。

假设val === 1，然后第一个角度将添加类fas 和fa-book，但随后（因为val === 2 是false）将从@ 中删除类fas 和fa-eye 987654335@.
当 val === 2 改为时，首先将评估 val === 1 案例并删除类 fas 和 fa-book，但随后它将评估 val === 2 案例并添加 fas 类回来，所以它会正常工作

无论如何，在这一点上，当您在多个条件下拥有相同的类时，我发现的唯一解决方案是重新组织您的代码，以便让共享类处于不同的条件下，如下所示：

<span [ngClass]="{
    'fas': val === 1 || val === 2, //val !== 3 would've been fine too in this specific case
    'fa-book': val === 1, 
    'fa-eye': val === 2, 
    'far fa-star': val === 3 }">
</span>

这是显示问题的 Plunkr：https://plnkr.co/edit/EouOaIfBkIR5Q29n?open=lib%2Fapp.ts&deferRun=1（更改 app.ts 中的“val”值。1 不适用于第一个跨度，而 2 和 3 将适用于两种情况）

【讨论】：