Angular - 属性绑定

属性绑定是 HTML 元素/组件的通用绑定，有助于设置 HTML 元素或 Angular 组件属性的值。

语法

在模板中表示 HTML 元素或组件属性的语法是在方括号([...]) 中包含属性，如下所示：

<element-or-component [<property name>]="<template variable>">
   <!-- content -->
</element-orcomponent>

属性的值基本上是一个模板变量。在从模板生成视图时，Angular 将通过处理模板变量来设置属性的值。

让我们看看如何为 img HTML 元素的 src 属性设置值。

**步骤1：**在组件中声明一个变量 image 并设置一个值。

image: string = 'images/my-image.jpg'

**步骤2：**将 image 变量设置为 img HTML 元素模板中 src 属性的值（使用方括号括起来），如下所示：

<img [src]="image" />

HTML 元素的属性

Angular 公开了具有匹配属性的常用 HTML 元素的属性。

<input type="text" [value]="val" />

这里，value 是 Angular 公开的 HtmlInputElement 的属性。

对于包含多个单词的属性，相应的属性名称将转换为驼峰命名法。例如，colspan 属性对应的 Angular 属性为 colSpan。

布尔属性

HTML 元素/组件的布尔属性不具有值。HTML 元素中的一些布尔属性示例包括 disabled、required 和 read-only。对于布尔属性，我们可以为属性设置一个布尔变量。布尔值决定了 HTML 元素/组件中属性的存在/不存在。

让我们看看如何设置 input HTML 元素的 required 属性。

**步骤1：**在组件中声明一个变量 isRequired 并设置 true 或 false。

isRequired: boolean = true

**步骤2：**将 isRequired 变量设置为 input HTML 元素模板中 required 属性的值（使用方括号括起来），如下所示：

<input type="text" name="Username" [required]="isRequired" />

**步骤3：**由于 isRequired 变量的值为 true，因此模板的输出将包含 required 属性

<input type="text" name="Username" required />

应用属性绑定

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

用户名
密码
确认密码

**步骤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：**接下来，我们将尝试使用属性绑定为所有输入字段设置占位符文本。在组件中添加三个成员变量，分别表示用户名、密码和确认密码输入字段的占位符文本。

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

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

<input type="text" [placeholder]="placeholder1" name="username" required>

<input type="password" [placeholder]="placeholder2" name="password" required>

<input type="password" [placeholder]="placeholder3" name="confirm_password" required>

这里，

attr.placeholder 表示 placeholder 属性。

**步骤9：**组件的完整列表如下：

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

@Component({
   selector: 'app-login-form',
   templateUrl: './register-form.component.html',
   styleUrls: ['./register-form.component.css']
})
export class RegisterFormComponent {
   placeholder1: string = "Enter username"
   placeholder2: string = "Enter password"
   placeholder3: string = "Repeat password"
}

**步骤10：**组件模板的完整列表如下：

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

**步骤11：**接下来，运行应用程序并检查输出。

结论

属性绑定提供了为 HTML 元素和组件设置动态值的选项。它也支持布尔属性。它非常简单直观。

打印页面