简谈 Angular 动态绑定样式的几种方法
<p>动态绑定样式的本质是操作元素的 class 列表和内联样式。因为 class 和 style 都是 attribute，所以我们可以用 Attribute 绑定处理它们：只需要通过表达式计算出字符串结果即可。同理我们也可以用 Property 绑定处理。另外，Angular 还提供了专门的 class Attribute 绑定和 style Attribute 绑定。内置属性型指令 NgClass 和 NgStyle 也是用来动态绑定样式的。</p><h3 id="一绑定-html-class">一、绑定 HTML Class</h3>
<h4 id="一attribute-绑定">（一）Attribute 绑定</h4>
<table>
<thead>
<tr>
<th>语法</th>
<th>输入类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>="classExp"</td>
<td>string</td>
</tr>
</tbody>
</table>
<p>该方法的优先级最高，表达式结果是最终的 class 属性值。</p>
<h4 id="二property-绑定">（二）Property 绑定</h4>
<table>
<thead>
<tr>
<th>语法</th>
<th>输入类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>="classExp"</td>
<td>string</td>
</tr>
</tbody>
</table>
<p>该方法的优先级比 Attribute 绑定低，表达式结果是最终的 class 属性值。</p>
<h4 id="三class-attribute-绑定">（三）class Attribute 绑定</h4>
<table>
<thead>
<tr>
<th>绑定类型</th>
<th>语法</th>
<th>输入类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>单 class 绑定</td>
<td>="classExp"</td>
<td>boolean | undefined | null</td>
</tr>
<tr>
<td>多 class 绑定</td>
<td>="classExp"</td>
<td>string| Array<string> |</td>
</tr>
</tbody>
</table>
<p>该方法会更新 class 属性值，更新逻辑取决于结果的类型。<br>
单 class 绑定：</p>
<ul>
<li>当绑定的值为真的时候添加，为假则移除。</li>
</ul>
<p>多 class 绑定：</p>
<ul>
<li>string - 会把列在字符串中的 classes（空格分隔）添加进来，</li>
<li>Array - 会把数组中的各个元素作为 classes 添加进来，</li>
<li>Object - 每个 key 都是要处理的 class，当 value 的值为真的时候添加，为假则移除。</li>
</ul>
<h4 id="四内置属性型指令-ngclass-绑定">（四）内置属性型指令 NgClass 绑定</h4>
<table>
<thead>
<tr>
<th>语法</th>
<th>输入类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>="classExp"</td>
<td>string | Array<string> | Set<string> |</td>
</tr>
</tbody>
</table>
<p>该方法类似于上面的多 class 绑定，但是功能更加强大，比如：</p>
<ul>
<li>支持输入 Set 类型，</li>
<li>输入 Object 类型时支持 key 中带空格（表示多个 class）。</li>
</ul>
<h3 id="二绑定内联样式">二、绑定内联样式</h3>
<h4 id="一attribute-绑定-1">（一）Attribute 绑定</h4>
<table>
<thead>
<tr>
<th>语法</th>
<th>输入类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>="styleExp"</td>
<td>string</td>
</tr>
</tbody>
</table>
<p>表达式结果是最终的 style 属性值。</p>
<h4 id="二style-attribute-绑定">（二）style Attribute 绑定</h4>
<table>
<thead>
<tr>
<th>绑定类型</th>
<th>语法</th>
<th>输入类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>单 style 绑定</td>
<td>="styleExp"</td>
<td>string | undefined | null</td>
</tr>
<tr>
<td>带单位的单 style 绑定</td>
<td>="styleExp"</td>
<td>number | undefined | null</td>
</tr>
<tr>
<td>多 style 绑定</td>
<td>="styleExp"</td>
<td>string| Array<string> |</td>
</tr>
</tbody>
</table>
<p>该方法会更新 style 属性值，更新逻辑取决于结果的类型（参考 class Attribute 绑定的更新逻辑）。</p>
<h4 id="三内置属性型指令-ngstyle-绑定">（三）内置属性型指令 NgStyle 绑定</h4>
<table>
<thead>
<tr>
<th>语法</th>
<th>输入类型</th>
</tr>
</thead>
<tbody>
<tr>
<td>="styleExp"</td>
<td></td>
</tr>
</tbody>
</table>
<p>该方法会更新 style 属性值，输入类型只能是对象。其中 key 是样式名称，带有可选的单位后缀（比如 'top.px'，'font-style.em'）；value 是待求值的表达式。如果 value 不是 null，则把用指定单位表示的结果赋值给指定的样式属性；如果是 null，则删除相应的样式。</p>
<h3 id="三总结">三、总结</h3>
<p>绑定 HTML Class 的优先级为：Attribute 绑定 > Property 绑定 > 内置属性型指令 NgClass 绑定 > 内置属性型指令 NgClass 绑定。其中 Attribute 绑定和 Property 绑定会覆盖掉其他 class，必须谨慎使用。建议对于单个 class 的动态绑定使用单 class 绑定，对于多个则使用 NgClass 绑定。绑定内联样式时同理。</p>
<p><strong>文中使用的工具或者包的版本：</strong><br>
Angular CLI 11.0.6</p><br><br>
来源：https://www.cnblogs.com/yshenhua/p/14483560.html
頁:
[1]