angular html中的class和[class]有什么区别

问题描述

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

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类绑定。 但是方括号引起了我的注意，css绑定的[class]和class之间是否有真正的区别？我自己找不到正确的搜索字词/功能名称来用谷歌搜索

解决方法

括号[]表示该值是组件中的属性，因此与其说将类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'

,

您对class的理解是正确的，在[class]中，基于值，class将应用于该元素。如果该值为true或某个值，则将该类应用于该元素，否则它将忽略该类。所以基本上，您是使用特定的类来实现某些功能，而不是将其用于其他功能

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

参考文献可以更好地理解类： https://angular.io/api/common/NgClass，

Difference between [ngClass] vs [class] binding

,

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