本文介绍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>
两者都支持多style，多class，结果图
扫一扫
652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
