Angular 中的属性、类和样式绑定
介绍
本指南将帮助您更深入地了解属性、类和样式绑定之间的区别以及如何使用它们。本指南将介绍我们将要绑定 DOM 元素属性的不同方式。以下示例将展示如何绑定这些属性及其语法。
<tr><td [attr.attribute-name]="Attribute Value"></td></tr>
<h1 [class.class-name]="Class Value"></h1>
<h1 [style.style-name]="Style Value"></h1>
Angular 中的属性绑定
属性绑定用于绑定视图元素的属性。属性绑定主要用于我们没有任何与 HTML 元素属性相关的属性视图的情况。
让我们考虑一个例子，我们试图将一个值绑定到元素的 colspan 属性。
<h2>Attribute Binding Example</h2>
<table>
<tr>
<td colspan="{{4}}"></td>
</tr>
</table>
这将引发一个错误“模板解析错误：无法绑定到‘colspan’，因为它不是已知的本机属性”。
我们只能使用属性绑定和插值来绑定属性，而不能使用属性。我们需要单独的属性绑定来创建和绑定属性。要了解有关属性绑定的更多信息，请查看我之前的指南 [Angular 中的属性绑定](/guides/ property-binding-angular)。
属性绑定语法类似于属性绑定。在属性绑定中，我们只在括号之间指定元素。但在属性绑定的情况下，它以前缀 attar 开头，后跟一个点 (.) 和属性名称。然后，您可以使用解析为字符串的表达式绑定属性值。
让我们考虑一个例子，我们正在创建一个表并设置元素的 colspan 属性。在这里，我们通过将值绑定到 attr.colspan 属性属性将 colspan 设置为 3。
文件名：example.component.ts
import { Component } from "@angular/core";
@Component({
selector: 'app-example',
template: `
<div>
<table>
<tr><td [attr.colspan]="3">three</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</div>
`
})
export class ExampleComponent {
}
Angular 中的类绑定
类绑定用于设置视图元素的类属性。我们可以使用类绑定从元素的类属性中添加和删除 CSS 类名。
类绑定的语法也类似于属性绑定。在属性绑定中，我们只在括号之间指定元素。但在类绑定的情况下，它以前缀 class 开头，后跟一个点 (.) 和类的名称。然后，您可以使用 CSS 类名绑定类值，例如[class.class-name]。
下面的示例展示了设置无绑定的类属性的标准方法。在本例中，我们设置了一个类名为“myClass”的类属性，但没有绑定。
<div class="myClass">Setting class without binding</div>
下面的示例展示了如何使用绑定设置所有类值。在本例中，我们使用类绑定来绑定类“myClassBinding”。
<div class="myClass" [class]="myClassBinding">Setting all classes with binding</div>
每当模板表达式的计算结果为 true 时，Angular 就会将该类名绑定到类绑定。当模板表达式的计算结果为 false 时，它会删除该类。
让我们看另一个示例，其中我们使用类绑定来绑定特定的类名。在这种情况下，如果“isTrue”值的计算结果为 true，则它将“myClass”绑定到类属性。如果计算结果为 false，则它不会将“myClass”绑定到类属性。
文件名：example.component.ts
import { Component } from "@angular/core";
@Component({
selector: 'app-example',
template: `
<div>
<h1 [class.myClass]="isTrue">This class binding is for true value</h1>
<h1 [class.myClass]="!isTrue">This class binding is for false value</h1>
</div>
`
})
export class ExampleComponent {
isTrue: boolean = true;
}
虽然类绑定是一种很好的绑定方式，但是 ngClass 指令更适合同时处理多个类名。
Angular 中的样式绑定
样式绑定用于设置视图元素的样式。我们可以使用样式绑定来设置内联样式。
与类和属性绑定一样，样式绑定语法类似于属性绑定。在属性绑定中，我们只在括号之间指定元素。但在样式绑定的情况下，它以前缀类开头，后跟一个点 (.) 和样式名称。然后，您可以使用 CSS 样式名称（如[style.style-name] ）绑定样式值。
让我们考虑一个样式绑定的示例。在此示例中，我们将颜色样式绑定到“h1”元素。它将以蓝色显示 h1 标签内的文本。
文件名：example.component.ts
import { Component } from "@angular/core";
@Component({
selector: 'app-example',
template: `
<div>
<h1 [style.color]="blue">This is a Blue Heading</h1>
</div>
`
})
export class ExampleComponent {
}
样式绑定也会有单位。在下面的示例中，我们以“px”和“%”为单位设置样式字体大小。
import { Component } from "@angular/core";
@Component({
selector: 'app-example',
template: `
<div>
<span [style.font-size.px]="isTrue? 20 : 12">This style binding is set for true value</span>
<span [style.font-size.%]="!isTrue : 120 : 30">This style binding is set for false value</span>
</div>
`
})
export class ExampleComponent {
isTrue: boolean = true;
}
结论
在本指南中，我们探索了 Angular 中的属性、类和样式绑定技术。我们还了解了为什么要使用这些绑定。
如我们所见，属性、类和样式绑定是属性绑定的一部分。您可以在我的指南《Angular 中的属性绑定》中了解有关属性绑定的更多信息。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~