Angular中[ngStyle]和[ngClass]的使用方式

最新推荐文章于 2024-11-27 12:08:42 发布

原创最新推荐文章于 2024-11-27 12:08:42 发布 · 779 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angular #前端 #html

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍Angular框架中ngStyle与ngClass指令的基本用法，包括如何通过条件表达式动态设置元素的样式和类。具体示例展示了如何根据不同条件改变文本颜色及添加不同的CSS类。

[ngStyle]

直接使用
选择表达式等判断方式使用

  <!-- 设置颜色为红色 -->
  <div [ngStyle]="{'color': 'red'}">Angular</div>
  <!-- 如果1==2为真，设置颜色为红色，否则绿色 -->
  <div [ngStyle]="{'color': 1==2 ? 'red':'green'}">Angular</div>
  <!-- 如果1==1为真，设置颜色为红色，否则绿色 -->
  <div [ngStyle]="{'color': 1==1 ? 'red':'green'}">Angular</div>

[ngClass]

直接使用
选择表达式等判断方式使用

  <!-- true，把名为test1的class样式加到div上-->
  <div [ngClass]="{'test1': true}">Angular</div>
  <!-- true，把名为test2的class样式加到div上-->
  <div [ngClass]="{'test1': false, 'test2': true}">Angular</div>