Question

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

<img src="link_img" [style.width]="imgWidth">

而不是

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

希望有人为我解释...... 感谢您的阅读

Answer 1

因为使用第一种语法允许您更改给定条件的属性。

假设您想要在电脑屏幕上显示更大的图像，在手机屏幕上显示更小的图像：

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

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

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

等等。

Answer 2

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

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

然后在组件中定义一个属性，该属性包含一个css属性为对象的对象，如此。

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