为什么 ngClass 不是标准的属性绑定答案

【问题标题】：why ngClass is not a standard property binding为什么 ngClass 不是标准的属性绑定
【发布时间】：2020-02-07 21:34:45
【问题描述】：

我是Angular新手，只是一个关于内置指令和属性绑定的区别的问题，下面是我看到的一些代码：

// ... just js expression, not relevant here
<div [ngClass]="'text-white' + ...">
 Hello, World.
</div>
<div class="form-group m-2">
 <label>Name:</label>
 <input class="form-control" [value]=... />
</div>

那么为什么我们不能像 [value] 那样让 ngClass 成为标准的属性绑定：

<div [class]="'text-white' + ...">

为什么它必须是指令？

【问题讨论】：

docs 可能会有所帮助。
@KirkLarkin 它不适合我，它没有说明为什么 ngClass 不能成为标准属性绑定

标签： javascript angular angular-directive

【解决方案1】：

可以直接使用[class]。甚至可以与ngClass 结合，如下所示：

在 app.component.ts 中

isActive = true;
componentClass = 'my-class';

在 app.component.html 中

<div [class]="componentClass" [ngClass]="{ active: isActive }">hello</div>

如果你检查你的 html，你会看到这个结果：

<div _ngcontent-gej-c0="" class="my-class active">div</div>

但我不会推荐它。当您将构建可重用组件时，最好让最终开发人员可以使用类属性。

【讨论】：

【解决方案2】：

文字值应该在属性周围不带括号的情况下传递。

ngclass="text-white"

如果值是可变的，您可以通过将属性括在括号中来动态传递它：

组件.ts

 myclass: string = 'text-white';

组件.html

[ngclass]="myclass"

您还可以传递一个对象，其中每个项目都是一个 CSS 类名称和值 true 或 false，true 表示该类将被使用 false 表示它不会。

[ngClass]="{'row': true, 'container': false}"

也没有什么能阻止你动态地构建它。

组件.ts

getClassses(): any {
 return {'row': true, 'container': false}
}

组件.html

[ngClass]="getClasses()"

【讨论】：