angular官网-ngClass和ngStyle

最新推荐文章于 2023-06-03 14:38:51 发布

开水没有冬天

最新推荐文章于 2023-06-03 14:38:51 发布

阅读量278

点赞数

分类专栏： angular官网

本文链接：https://blog.youkuaiyun.com/weixin_42995876/article/details/100543388

版权

angular官网专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨了Angular中样式和类绑定的功能，展示了如何通过条件性地应用CSS类和内联样式来改变元素的外观。通过具体的代码示例，读者可以学习到如何使用*ngClass和*ngStyle指令来动态调整组件的视觉表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

class：

<div [class.special]="isSpecial">The class binding is special</div>

<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>


this.currentClasses =  {
    'saveable': this.canSave,
    'modified': !this.isUnchanged,
    'special':  this.isSpecial
};

style

<div [style.font-size]="isSpecial ? '12px' : '20px'" >
  This div is x-large or smaller.
</div>

<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>

this.currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
};