如何解决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
是直接属性
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。