Angular 中的属性绑定
介绍
属性绑定是一种技术，它有助于将值绑定到 HTML 元素的属性。
语法：[属性]
让我们考虑一个例子，将输入元素的 value 属性绑定到组件的 myText 属性。
文件名：example.component.ts
import { Component } from "@angular/core";
@Component({
selector: 'app-example',
template: `
<div>
<input [value]='myText'></span>
</div>
`
})
export class AppComponent {
myText: string = "Hello World";
}
让我们考虑另一个示例，我们将按钮元素的 disabled 属性绑定到组件的 isDisabled 属性。这将根据条件为 true 或 false 来禁用按钮。
import { Component } from "@angular/core";
@Component({
selector: 'app-example',
template: `
<div>
<button [disabled] = "isDisabled">Button disabled!</button>
</div>
`
})
export class AppComponent {
isDisabled: boolean = true;
}
让我们探索另一个设置 Angular 指令属性的示例。在本例中，我们将 Angular 指令 ngClass 属性设置为组件的 myClass 属性。根据不同的条件，它可以添加或删除类
<div [ngClass]="myClass">Binding ngClass to the myClass property</div>
使用属性绑定的单向数据绑定
单向数据绑定将使用属性绑定将数据从组件绑定到视图 (DOM) 或从视图绑定到组件。单向数据绑定是单向的。它将值从一个方向流动，从组件的数据属性流向目标元素属性。
您可以在我的指南《Angular 中的单向和双向数据绑定》中了解有关单向绑定的更多信息。
为什么要使用属性绑定？
以下是我们应该使用属性绑定的几个最有用的原因。
- 属性绑定可帮助您将值绑定到方括号内的元素属性的目标属性。
让我们考虑一个示例，其中我们将值“Hello World!”绑定到 span 元素的 innerHTML 属性。在本例中，目标属性是 innerHTML。
<span [innerHTML]='Hello World!'></span>
我们还可以使用替代规范形式“bind-prefix”来绑定属性。
<span bind-innerHTML='Hello World!'></span>
- 当我们将元素属性绑定到非字符串数据值时，我们使用属性绑定。这样，我们绑定到视图的对象类型和从组件传递的值就不会发生任何变化。为了便于阅读，我们可以使用插值技术。
属性绑定期间应避免的情况
以下是使用属性绑定时应避免的一些事项。
- 当我们将方法或函数绑定到属性绑定时，该方法可能会更改组件中的值。Angular 可能会或可能不会显示更改的值。它可能会检测到更改，但会抛出警告错误。
- 使用属性绑定时，请确保显示的值匹配。
- 模板表达式中的值应计算为目标属性所期望的值的类型。假设目标属性期望一个数字，则应返回该数字。如果目标属性期望一个字符串，则应返回字符串。如果目标属性期望一个对象，则应返回该对象。
让我们考虑一个 ExampleComponent 的例子。这里 AppExample 组件的 person 属性期望一个 person 类型的对象需要绑定到它。
文件名： person.ts
export class Person{
name: string;
address: string;
}
文件名：app.component.ts
import { Component } from "@angular/core";
import { Person } from '../person';
@Component({
selector: 'app-root',
template: `
<div>
<app-example [person]="personName"></app-example>
</div>
`
})
export class AppComponent {
personName: Person;
}
- 在属性绑定期间，不要忘记将属性放在括号内。括号会告诉 Angular 评估模板表达式。如果忘记使用括号，Angular 会将字符串视为常量，并使用该字符串初始化目标属性。它不会评估字符串。
我们来考虑一个例子：如果我们在属性绑定期间不使用括号，那么我们将收到一个错误“person 需要一个 Person 对象，而不是字符串 personName”。
<app-example person="personName"></app-example>
当满足以下所有条件时，可以省略括号：
- 目标属性接受字符串值。
- 该字符串是一个固定值。
- 初始值永远不会改变。
让我们考虑一个例子，我们将 ExampleComponent 的 value 属性初始化为字符串“Hello World!”，而不是模板表达式。Angular 只设置一次这个固定字符串值，然后就忘记了。
<app-example value = "Hello World!"></app-example>
每当我们将元素属性绑定到非字符串值时，我们必须使用属性绑定。否则，Angular 将无法识别我们尝试绑定到 DOM 的数据值的类型。
Angular 不允许将脚本标签放置在 HTML 中。这可能会导致 HTML 泄漏并引发安全问题。HTML 中不允许属性绑定和插值。
让我们考虑一个例子，其中我们将一个值从组件绑定到包含脚本标签的视图，如下所示。
文件名：example.component.ts
import { Component } from "@angular/core";
@Component({
selector: 'app-example',
template: `
<div>
<<span [innerHTML]="scriptText"></span>
</div>
`
})
export class ExampleComponent {
scriptText = 'Template <script>alert("Text with script tag!")</script>Syntax';
}
Angular 会在将值渲染到视图之前对其进行清理。在上述情况下，Angular 将发出警告“清理 HTML 时删除了一些内容”。
结论
在本指南中，我们探索了 Angular 的属性绑定技术。我们还了解了为什么要使用属性绑定以及在属性绑定期间应该避免什么。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~