Angular - 绑定及其类型

绑定是将模板中的目标连接到由所属组件模型创建的模板表达式或模板语句的过程。当组件的模型发生变化时，模板表达式的输出也会发生变化，并更新模板输出（视图）。

绑定类型

文本插值是最简单的绑定形式，Angular 提供多种类型的绑定以应对不同的场景。绑定类型如下：

文本插值是将组件实例的模型连接到组件模板文本部分的过程。

让我们考虑一个在组件中可用的属性 name。

name: string = "John"

然后，可以使用文本插值在模板中使用 name，如下所示：

Name: {{ name }}

模板的最终输出如下所示：

Name: John

让我们在接下来的章节中详细学习文本插值。

属性绑定是将组件实例的模型连接到组件模板中（目标）HTML 元素的属性的过程。

让我们考虑一个在组件中可用的属性 name。

name: string = "John"

属性绑定可以写成如下所示：

<input type="text" name="username" [attr.value]="name" />

模板的输出如下所示：

<input type="text" name="username" value="John" />

让我们在接下来的章节中详细学习属性绑定。

样式绑定是将组件实例的模型连接到组件模板中（目标）HTML 元素的样式属性的过程。

让我们考虑一个在组件中可用的属性 myStyle。

myStyle: string = "background-color: blue"

类绑定可以写成如下所示：

<button [style]="myStyle">Click here</button>

模板的输出如下所示：

<button style="background-color: blue">Click here</button>

让我们在接下来的章节中详细学习样式绑定。

类绑定是将组件实例的模型连接到组件模板中（目标）HTML 元素的类属性的过程。

让我们考虑一个在组件中可用的属性 myClass。

myClass: string = "fancy-button"

类绑定可以写成如下所示：

<button [class]="myClass">Click here</button>

模板的输出如下所示：

<button class="fancy-button">Click here</button>

让我们在接下来的章节中详细学习类绑定概念。

属性绑定是将组件实例的模型连接到组件模板中（目标）HTML 元素/其他组件的属性的过程。Angular 将 HTML 元素的属性作为属性公开，并将属性名称转换为驼峰式命名法。这将有助于通过属性绑定连接 HTML 元素的所有属性。

让我们考虑一个在组件中可用的属性 name。

name: string = "John"

属性绑定可以写成如下所示：

<input type="text" name="username" [value]="name" />

模板的输出如下所示：

<input type="text" name="username" value="John" />

让我们在接下来的章节中详细学习属性绑定概念。

事件绑定是将操作（模板语句/组件的方法）设置为（目标）HTML 元素/（另一个）组件事件的过程。

让我们考虑一个在组件中可用的方法 myAction。

myAction() {
   // do some process
}

事件绑定可以写成如下所示：

<button type="submit" (submit)="myAction">Click here</button>

一旦触发 submit 事件，myAction() 方法将被调用并执行。

让我们在接下来的章节中详细学习事件绑定概念。

双向数据绑定是属性和事件绑定的组合，用于同步父组件和子组件之间的数据。

双向数据绑定的示例格式如下：

// `parent-comp` template
<child-comp [(data)]="dataChange()" />

在这里，数据将最初从父组件传递到子组件，然后，无论何时子组件中的数据更新，子组件都将触发带有更新数据的事件，父组件将通过事件回调方法 dataChange() 捕获数据。

让我们在接下来的章节中详细学习双向数据绑定概念。

绑定提供了多个选项来将组件连接到其模板。这使开发人员能够轻松创建丰富的前端应用程序。绑定减少了前端逻辑的复杂性，并使开发人员能够在较短的时间内专注于开发更多功能。

打印页面