angular html中class和[class]之间的区别是什么

Question

为了寻找关于角度文件夹结构的良好实践，我偶然发现了这段代码：

content layout.component.html:

<div [class]="theme">
<div class="mat-app-background">
<app-nav></app-nav>
<div class="container">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
</div>

据我所知，class标记用于将该组件HTML与CSS类绑定。但是方括号引起了我的注意，[class]和css绑定类之间有什么真正的区别吗？我无法找到正确的搜索词/功能名称来自己搜索

Answer 1

括号[]表示该值是组件中的一个属性，因此它不会说将类theme应用于元素，而是在组件中查找属性theme并使用其中存储的任何内容。

class="theme" // apply class theme

// Component
public theme = 'theme';
// HTML
[class]="theme" // use what's stored in property "theme"
or
[class]="'theme'" // use string 'theme'

Answer 2

[]是一种在ts和HTML之间绑定数据的方法，因此在这种情况下，theme是一个变量，而container是一个直接属性

Answer 3

您对class的理解是正确的，根据值，class将应用于该元素。如果值为true或某个值，则该类将应用于该元素，否则将忽略该类。所以基本上，你是在为一些功能使用一个特定的类，而不是为另一个使用它

例如：<div [class.classOne]="true"></div>//现在div元素将具有classOne类，因为结果为true或某个值。

更好地理解类的参考资料：https://angular.io/api/common/NgClass，

[ngClass]与[class]绑定之间的差异