Angular - 類和樣式繫結

類繫結

動態 Web 應用程式通常具有動態樣式，並在應用程式執行時設定。類繫結是一種特殊的繫結，用於將動態值繫結到 HTML 元素的 class 屬性。

讓我們在本節中詳細瞭解類繫結。

類繫結的語法

Angular 在類繫結中提供了四種不同的語法。每種型別的類繫結都支援一項特殊功能。這四種語法如下所示：

單類繫結
帶開/關功能的單類繫結
多樣式繫結
透過帶開/關功能的物件進行多樣式繫結

讓我們在接下來的章節中逐一學習。

單類繫結

在單類繫結中，類字串應括在方括號中，並應將模板變數設定為其值。

<div [class]="<template variable>">
   <!-- content -->
</div>

在這裡，模板變數儲存特定 HTML 元素的類名。

帶開/關功能的單類繫結

在帶開/關功能的單類繫結中，class. style 應附加給定 HTML 元素的實際類名，並且應將具有布林值的模板變數設定為其值。布林值確定特定類對 HTML 元素的可用性。

<div [class.<class name>]="template variable">
   <!-- content -->
</div>

在這裡，模板變數輸出 true 或 false。

讓我們考慮一個名為 red 的類，用於將 HTML 元素的文字設定為紅色。

.red {
   color: red;
}

考慮元件中可用的成員變數 isRedEnabled。

isRedEnabled: boolean = true

然後，可以在 HTML 元素中設定類繫結，如下所示：

<div [class.red]="isRedEnabled">
   <!-- content -->
</div>

多類繫結

在多類繫結中，類字串應括在方括號中，並且應使用一個或多個以空格分隔的現有類名設定值。例如，可以使用 [class] 設定 HTML 元素的兩個類（myClass 和 myAnotherClass），如下所示：

<div [class]="<template variable>">
   <!-- content -->
</div>

在這裡，模板變數將發出 myClass myAnotherClass 字串。

透過帶開/關功能的物件進行多類繫結

在透過帶開/關功能的物件進行多類繫結中，類字串應括在方括號中，並且應使用 Record<string, boolean> 型別的物件設定值，該物件分別具有類名和布林值作為鍵和值。鍵的布林值確定是否將相應的鍵設定為給定 HTML 元素的類。

<div [class]="<objects as template variable>">
   <!-- content -->
</div>

讓我們考慮一個具有多個表示類名的鍵的物件，並具有布林值，如下所示：

// in component
myClass: Record<string, boolean> = { 
   c1: true,
   c2: false
   c3: true
}

在模板中應用類繫結，如下所示：

// in template
<div [class]="myClass">
   <!-- content -->
</div>

然後，輸出將具有 c1 和 c3 類，因為這兩個類在物件中都具有 true 值。

// output
<div class="c1 c3">
   <!-- content -->
</div>

應用類繫結

讓我們建立一個簡單的登錄檔單來了解類繫結。我們的登錄檔單將具有三個輸入欄位，如下所示，以及一個提交登錄檔單的按鈕。

1. Username
2. Password
3. Confirm password

步驟 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 樣式，並使用 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：接下來，讓我們在樣式檔案中建立一些類，並使用類繫結為按鈕應用我們的新類。

步驟 8：接下來，在元件的樣式檔案中新增兩個類 purple 和 small-caps。

.purple {
   background-color: purple;
}

.smallcaps {
   font-variant: small-caps;
}

步驟 9：在元件中新增一個成員變數 isPurple，如下所示：

isPurple: boolean = true

步驟 10：接下來，在元件中新增一個物件，其中 purple 和 smallcaps 類作為鍵，如下所示：

btnClass: Record<string, boolean> = {
   'purple': true,
   'smallcaps': true
}

步驟 11：接下來，透過類繫結將變數 isPurple 分配給按鈕。

<button type="submit" [class.purple]="isPurple">Register</button>

步驟 12：執行應用程式並檢查輸出。輸出將顯示帶有紫色顏色的按鈕。

步驟 13：接下來，將物件 btnClass 重新分配給按鈕的類，透過類繫結。

<button type="submit" [class]="btnClass">Register</button>

在這裡，將應用 purple 和 small caps。

步驟 14：執行應用程式並檢查輸出。輸出將顯示帶有紫色顏色的按鈕，並且“註冊”文字為小寫格式。

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

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

@Component({
   selector: 'app-login-form',
   templateUrl: './register-form.component.html',
   styleUrls: ['./register-form.component.css']
})
export class RegisterFormComponent {
   isPurple: boolean = true
   
   btnClass: Record<string, boolean> = {
      'purple': true,
      'smallcaps': true
   }
}

步驟 16：元件模板的完整列表如下：

<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" [class.purple]="isPurple">Register</button> -->
         <button type="submit" [class]="btnClass">Register</button>
      </div>
   </form>
</div>

結論

類繫結使開發人員能夠輕鬆地透過字串或自定義物件為任何 HTML 元素的 class 屬性設定複雜的值。

樣式繫結

動態 Web 應用程式通常具有動態樣式，並在應用程式執行時設定。樣式繫結是一種特殊的繫結，用於將動態值繫結到 HTML 元素的 style 屬性。

讓我們在本節中詳細瞭解樣式繫結。

樣式繫結的語法

Angular 在樣式繫結中提供了四種不同的語法。每種型別的樣式繫結都支援一項特殊功能。這四種語法如下所示：

單樣式繫結
帶單位的單樣式繫結
多樣式繫結
透過自定義樣式物件進行多樣式繫結

讓我們在接下來的章節中逐一學習。

單樣式繫結

在單樣式繫結中，CSS 樣式的屬性名應附加到 style. 字串，並應括在方括號中。例如，可以使用 [style.width] 設定 HTML 元素的寬度，如下所示：

<div [style.width]="<template variable>">
   <!-- content -->
</div>

帶單位的單樣式繫結

在帶單位的單樣式繫結中，CSS 樣式的屬性名應附加到 style. 字串，單位（.px）應附加到 CSS 樣式的屬性名，並應括在方括號中。例如，可以使用 [style.width.px] 設定 HTML 元素的寬度（以 px 為單位），如下所示：

<div [style.width.px]="<template variable>">
   <!-- content -->
</div>

多樣式繫結

在多樣式繫結中，style 字串應括在方括號中，並且值應具有正確的 CSS 樣式。例如，可以使用 [style] 設定 HTML 元素的寬度和高度，如下所示：

<div [style]="<template variable>">
   <!-- content -->
</div>

在這裡，模板變數的一個示例輸出是 width: 100px; height: 200px

帶物件的多個樣式繫結

在帶物件的多個樣式繫結中，style 字串應括在方括號中，並且應使用 Record<string, string 型別的物件設定值，該物件分別具有正確的 CSS 屬性名（或轉換為駝峰式大小寫）和值作為鍵和值。例如，可以使用 [style] 設定 HTML 元素的寬度和高度，如下所示：

<div [style]="<objects as template variable>">
   <!-- content -->
</div>

在這裡，一個示例物件如下所示：

{ 
   width: '100px',
   height: '100px'
}

應用樣式繫結

讓我們建立一個簡單的登錄檔單來了解屬性繫結。我們的登錄檔單將具有三個輸入欄位，如下所示，以及一個提交登錄檔單的按鈕。

1. Username
2. Password
3. Confirm password

步驟 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 樣式檔案，並使用 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：接下來，讓我們嘗試使用樣式繫結為按鈕應用樣式。

步驟 8：在元件中新增一個包含必要值的物件，如下所示：

btnStyle: Record<string, string> = {
   'backgroundColor': 'purple',
   'color': 'white',
   'padding': '15px 20px',
   'margin': '10px 0',
   'border': 'none',
   'cursor': 'pointer',
   'width': '100%'
}

在這裡，我們將按鈕的背景顏色從藍色更改為紫色。另外，請注意背景顏色樣式屬性 background-color 以駝峰式大小寫 backgroundColor 表示。

步驟 9：接下來，刪除元件樣式檔案中的按鈕樣式

步驟 10：接下來，透過樣式繫結將樣式物件分配給按鈕。

<button type="submit" [style]="btnStyle">Register</button>

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

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

@Component({
   selector: 'app-login-form',
   templateUrl: './register-form.component.html',
   styleUrls: ['./register-form.component.css']
})
export class RegisterFormComponent {
   btnStyle: Record<string, string> = {
      'backgroundColor': 'purple',
      'color': 'white',
      'padding': '15px 20px',
      'margin': '10px 0',
      'border': 'none',
      'cursor': 'pointer',
      'width': '100%'
   }
}

步驟 12：元件模板的完整列表如下：

<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" [style]="btnStyle" >Register</button>
      </div>
   </form>
</div>

步驟 13：執行應用程式並檢查輸出。

結論

樣式繫結使開發人員能夠輕鬆地透過純樣式或自定義樣式物件為任何 HTML 元素的 style 屬性設定複雜的值。

列印頁面