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 元素和元件設定動態值的選項。它也支援布林屬性。它非常簡單直觀。

列印頁面