1. 属性绑定
属性绑定允许你动态地设置 HTML 元素的属性。它使用方括号 [] 来绑定组件类中的属性到 HTML 元素上。
// 组件类
export class AppComponent {
imageUrl = 'path/to/image.jpg';
}
<!-- 模板 -->
<img [src]="imageUrl" alt="Angular Image">
在这个例子中，[src] 属性绑定将 imageUrl 组件类中的属性绑定到 img 元素的 src 属性上。
2. 类绑定
类绑定允许你动态地添加或移除 CSS 类。它使用 [class] 来根据条件动态添加或移除类。
// 组件类
export class AppComponent {
hasError = true;
}
<!-- 模板 -->
<div [class.error]="hasError">This div has an error class</div>
在这个例子中，[class.error] 类绑定根据 hasError 组件类中的属性值来决定是否添加 error CSS 类。
3. 样式绑定
样式绑定允许你动态地设置 HTML 元素的内联样式。它使用 [style] 来根据条件动态设置元素的内联样式。
// 组件类
export class AppComponent {
isHighlighted = true;
}
<!-- 模板 -->
<p [style.font-weight]="isHighlighted ? 'bold' : 'normal'">This text is highlighted</p>
在这个例子中，[style.font-weight] 样式绑定根据 isHighlighted 组件类中的属性值来设置元素的内联样式。
这三种绑定机制是 Angular 中实现动态交互和样式变化的关键。它们可以根据组件类中的属性值动态地更新 HTML 元素的属性、类和内联样式，使应用程序更加灵活和动态。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4924/Angular