Angular 样式绑定和类绑定

为什么我们需要Angular中的样式绑定和类绑定，而不是使用HTML样式和传统类？ 例如：

而不是

<img src="link_img" width="200">

希望有人能为我解释。。。

---

感谢阅读

，因为使用第一种语法可以在给定条件下更改属性

例如，假设您希望在计算机屏幕上显示较大的图像，在电话屏幕上显示较小的图像：

<img [style.width]="isOnPhone ? '50%' : '100%'">

在这种特殊情况下，这没有多大用处，因为CSS可以处理这一点，但是想象一下所有的可能性：

<div class="user-informations" [style.display]="isUserConnected ? 'block' : 'none'">
<button type="submit" [disabled]="isFormValid ? false : true">

---

等等

应用多种样式的下一步是在模板中使用ngStyle

<p [ngStyle]="styles">
  I'm stylish!
</p>

---

你两者都可以。角度样式绑定是动态的，您也可以从您的typescript代码中控制它。所有HTML属性都可以绑定以使视图动态，样式也不例外。

<p [ngStyle]="styles">
  I'm stylish!
</p>

styles = {
  border: '3px dotted blue',
  fontSize': '22px',
  fontWeight: 'bold'
}