Angular - 属性绑定

什么是属性绑定？

属性绑定有助于为 HTML 元素的属性设置值。Angular 将 HTML 元素的属性暴露为与之匹配的属性，其中属性名转换为 camelCase 格式。

例如，colspan 属性的对应 Angular 属性是 colSpan。尽管 Angular 试图将所有 HTML 元素的属性提供为属性，但它仍然缺少某些 SVG 元素、aria（网页可访问性）元素等的属性。

当 HTML 元素的属性不可用作属性时，我们可以使用属性绑定。此外，我们可以对所有 HTML 元素的属性使用属性绑定。

如何使用属性绑定？

要在 Angular 应用中使用属性绑定，请在属性名周围使用方括号。它基本上表示模板中 HTML 元素的属性。

语法

使用属性绑定的语法如下 −

<HTMLTag [attr.<attribute_name>]="<template variable>" />

我们可以将 attr. 字符串与 HTML 元素的实际属性名组合，创建 Angular 属性表示。属性的值是一个模板变量。在从模板生成视图时，Angular 将通过处理模板变量来设置属性的值。

示例 - 实现属性绑定

让我们创建一个简单的注册表单来理解属性绑定。我们的注册表单将包含以下三个输入字段和一个提交注册表单的按钮。

• 用户名
• 密码
• 确认密码

步骤 1： 使用 angular CLI 创建一个新的应用 my-app，如下所示 −

ng new my-app

步骤 2： 使用 angular CLI 创建一个新的注册表单组件 RegisterForm，如下所示 −

ng generate component RegisterForm

步骤 3： 打开注册表单组件的模板，添加包含用户名、密码和确认密码的用户注册表单。

<div>
   <form method="post">
      <div class="container">
         <label for="username"><b>Username</b></label>
         <input type="text" name="username" required>
      
         <label for="password"><b>Password</b></label>
         <input type="password" name="password" required>
      
         <label for="confirm_password"><b>Confirm Password</b></label>
         <input type="password" name="confirm_password" required>
      
         <button type="submit">Register</button>
      </div>
   </form>
</div>

步骤 4： 打开注册表单组件的样式文件，使用 CSS 为注册表单添加样式，如下所示 −

.container {
   padding: 15px;
}

input[type=text], input[type=password] {
   width: 100%;
   padding: 10px 20px;
   margin: 10px 0;
   display: inline-block;
   border: 1px solid #ccc;
   box-sizing: border-box;
}

button {
   background-color: blue;
   color: white;
   padding: 15px 20px;
   margin: 10px 0;
   border: none;
   cursor: pointer;
   width: 100%;
}

步骤 5： 在应用模板文件 app.component.html 中包含我们的注册表单组件：

<app-register-form />

步骤 6： 运行应用并测试注册表单。

步骤 7： 接下来，我们将尝试使用属性绑定为所有输入字段设置 placeholder 文本。在组件中添加三个成员变量，分别代表用户名、密码和确认密码输入字段的 placeholder 文本。

placeholder1: string = "Enter username"
placeholder2: string = "Enter password"
placeholder3: string = "Repeat password"

步骤 8： 在模板中使用 [attr.placeholder] 属性，将上述声明的组件成员变量分别赋值给用户名、密码和确认密码输入字段的 placeholder 属性，如下所示 −

<div>
   <form method="post">
      <div class="container">
         <label for="username"><b>Username</b></label>
         <input type="text" [attr.placeholder]="placeholder1" name="username" required>
      
         <label for="password"><b>Password</b></label>
         <input type="password" [attr.placeholder]="placeholder2" name="password" required>
      
         <label for="confirm_password"><b>Confirm Password</b></label>
         <input type="password" [attr.placeholder]="placeholder3"
         name="confirm_password" required>
      
         <button type="submit">Register</button>
      </div>
   </form>
</div>

这里，

• attr.placeholder 表示 input 元素的 placeholder 属性。

步骤 9： 让我们为输入字段添加 ARIA 属性 aria-label。aria-label 用于无障碍访问目的。

<div>
   <form method="post">
      <div class="container">
         <label for="username"><b>Username</b></label>
         <input type="text" [attr.aria-label]="placeholder1"
            [attr.placeholder]="placeholder1" name="username" required>
      
         <label for="password"><b>Password</b></label>
         <input type="password" [attr.aria-label]="placeholder2"
            [attr.placeholder]="placeholder2" name="password" required>
      
         <label for="confirm_password"><b>Confirm Password</b></label>
         <input type="password" [attr.aria-label]="placeholder3"
            [attr.placeholder]="placeholder3" name="confirm_password" required>
      
         <button type="submit">Register</button>
      </div>
   </form>
</div>

步骤 10： 接下来，运行应用并查看输出。

步骤 11： 由于我们可以使用属性绑定设置 HTML 元素的任何属性，让我们使用属性绑定应用 class 属性 container。

步骤 12： 在组件中创建一个新的成员变量 myContainerClass，如下所示 −

myContainerClass: string = "container"

步骤 13： 在模板中应用该成员变量，如下所示 −

<div [attr.class]="myContainerClass">
   <!-- form -->
</div>

步骤 14： 组件的完整代码如下：

import { Component } from '@angular/core';

@Component({
  selector: 'app-register-form',
  imports: [],
  templateUrl: './register-form.html',
  styleUrl: './register-form.css',
})
export class RegisterForm {
   myContainerClass: string = "container"
   placeholder1: string = "Enter username"
   placeholder2: string = "Enter password"
   placeholder3: string = "Repeat password"
}

步骤 15： 组件模板的完整代码如下：

<div>
   <form method="post">
      <div class="container">
         <label for="username"><b>Username</b></label>
         <input type="text" [attr.aria-label]="placeholder1"
            [attr.placeholder]="placeholder1" name="username" required>
      
         <label for="password"><b>Password</b></label>
         <input type="password" [attr.aria-label]="placeholder2"
            [attr.placeholder]="placeholder2" name="password" required>
      
         <label for="confirm_password"><b>Confirm Password</b></label>
         <input type="password" [attr.aria-label]="placeholder3"
            [attr.placeholder]="placeholder3" name="confirm_password" required>
      
         <button type="submit">Register</button>
      </div>
   </form>
</div>

步骤 16： 接下来，运行应用并查看输出。

Property Binding 和 Attribute Binding 的区别

下表展示了 property binding 与 attribute binding 的区别 −

总结

Attribute binding 使开发者能够为任何 HTML 元素的属性设置动态值，即使是为将来可能定义的元素。