Angular - 屬性繫結

屬性繫結是 Angular 提供的最簡單的繫結方式。它用於設定 HTML 元素屬性的值。Angular 透過與屬性名稱匹配的屬性公開 HTML 元素的屬性，並將屬性名稱轉換為 camelCase。例如，colspan 屬性對應的 Angular 屬性是 colSpan。

儘管 Angular 嘗試將所有 HTML 元素屬性作為屬性提供，但它仍然缺少一些 SVG 元素、aria（Web 可訪問性）元素等的屬性。當 HTML 元素的屬性不可作為屬性使用時，可以使用屬性繫結。此外，可以對所有 HTML 元素的屬性使用屬性繫結。

語法

在模板中表示 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：接下來，我們將嘗試使用屬性繫結為所有輸入欄位設定佔位符文字。在元件中新增三個成員變數來表示使用者名稱、密碼和確認密碼輸入欄位的佔位符文字。

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

步驟 8：使用 [attr.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 表示輸入元素的佔位符屬性。

步驟 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 元素的任何屬性，讓我們使用屬性繫結應用類 container。

步驟 12：在元件中建立一個新的成員變數 myContainerClass，如下所示：

myContainerClass: string = "container"

步驟 13：在模板中應用成員變數，如下所示：

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

步驟 14：元件的完整列表如下：

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

@Component({
   selector: 'app-login-form',
   templateUrl: './register-form.component.html',
   styleUrls: ['./register-form.component.css']
})
export class RegisterFormComponent {
   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：接下來，執行應用程式並檢查輸出。

結論

屬性繫結使開發人員能夠為任何 HTML 元素的屬性設定動態值，即使是將來可能定義的元素。

列印頁面