Angular - 模板

---

---

Angular 模板用於生成元件的檢視/使用者介面，以便在瀏覽器中呈現。

在本章中，讓我們一起了解 Angular 模板的概述，然後在後面的章節中更詳細地學習模板的每個主題。

Angular 檢視

Angular 提供了一套豐富的功能來建立應用程式的使用者介面。Angular 應用程式的使用者介面的一部分稱為 Angular 檢視。Angular 檢視基本上是在 Angular 應用程式執行期間中間儲存在記憶體中的 HTML/DOM 結構塊。Angular 檢視呈現到 Angular 應用程式的最終 HTML 標記中。

Angular 應用程式中的每個元件都將有一個與其關聯的檢視。與元件關聯的檢視稱為元件檢視。元件檢視是在應用程式執行過程中根據與元件關聯的 Angular 模板建立的。因此，Angular 應用程式中的每個元件都將有一個與其關聯的模板。模板和元件例項之間存在動態互動。模板從元件接收資料，並將資料傳送到元件。

Angular 模板

Angular 模板基本上是 HTML 語言的擴充套件。它支援所有 HTML 元素，除了以下元素。

• HTML
• body
• base
• script

由於 Angular 模板的目的是僅生成 HTML 片段，而不是完整的 HTML 文件，因此它不支援 HTML 元素（HTML、body 和 base），這些元素僅用於建立 HTML 文件。出於防止在最終的 Angular 應用程式中注入指令碼的目的，script 標籤被有意地不支援。

Angular 模板的特性

除了 HTML 之外，Angular 模板還支援其他功能來建立動態內容並提供與元件的豐富互動。

• Angular 元件
• 文字插值
• 透過 Angular 管道進行文字轉換
• 語句
• 繫結
• Angular 指令
• 模板變數

Angular 元件

Angular 模板支援包含應用程式中可用的其他元件。在模板中使用元件可以實現元件的巢狀以及元件之間的豐富互動。讓我們考慮兩個元件，home 和 login 元件。然後，home 元件的模板可以包含 login 元件，如下所示：

<div id="container">
   <login></login>
</div>

文字插值

文字插值是在模板中使用模板表示式來使用元件的資料。假設一個元件有一個名為 name 的屬性。

export class HomeComponent {
   name: string = 'John'
}

然後，name 可以在其模板中使用，如下所示：

Hello {{ name }}

請注意，雙花括號用於指定模板表示式。

透過管道進行文字轉換

可以使用管道符號 (|) 在模板中進行文字轉換。Angular 模板提供了一個名為 Angular 管道的獨特功能，它基本上是一個 JavaScript 函式，它接受輸入以及透過引數進行的修飾符，並將輸入資料的格式從一種轉換為另一種，並將其呈現。Angular 擁有許多用於日期、貨幣等的內建管道，並且還提供了建立新的自定義管道的選項。

讓我們考慮一個簡單的元件 CurrentTimeComponent 來顯示當前時間和日期。

export class CurrentTimeComponent {
   currentDate : date = new Date()
}
<div>
   The current date and time is {{ currentDate | date:'short' }}
</div>

這裡，date 是管道函式 (datePipe)，short 是它的引數。這將以簡單的格式顯示帶有時間的當前日期，如下所示

<div _ngcontent-ng-c323970836="">
   The current date and time is 7/29/23, 3:35 PM
</div>

模板語句

模板語句用於透過 HTML 文件中的事件與使用者互動。模板語句類似於 JavaScript 表示式，但有一些例外和一些新增。

讓我們考慮一個透過使用者操作顯示/隱藏部分的簡單場景。該元件將有一個隱藏方法 hide() 和另一個顯示方法 show() 來顯示該部分。該元件的模板將有兩個按鈕來觸發 show 和 hide 操作。按鈕的 click 事件將透過模板語句設定為 show/hide 方法。

export class MySectionComponent {
   hideStatus: boolean = false;
   
   show() {
      this.hideStatus = false;
   }
   
   hide() {
      this.hideStatus = true;
   }
}

這裡，hideStatus 是元件的一個布林屬性，用於在 section 元素中設定/刪除 CSS 類 hide。show() 和 hide() 是兩個方法，用於執行在 section 元素中設定/刪除 css 類的操作。

.hide {
   display: none;
}
<div [class.hide]="hideStatus">
   <p>Hi, I am simple section created for the testing purpose<p>
</div>
<button (click)="hide()">Hide the section</button>
<button (click)="show()">Show the section</button>

這裡，hide() 和 show() 是模板語句，用於為按鈕的 click 事件設定操作。[class.hide]="hideStatus" 是 Angular 模板中提供的類繫結概念，我們將在後面的章節中學習。

繫結

繫結是連線模板中的目標和基於元件模型的表示式或語句的過程，該元件模型屬於模板所屬的元件。文字插值是最簡單的繫結形式，Angular 提供了許多型別的繫結。它們如下：

• 文字插值：文字插值是將元件例項的模型連線到元件模板的文字部分的過程

• 屬性繫結：屬性繫結是將元件例項的模型連線到元件模板中（目標）HTML 元素的屬性的過程

• 類和樣式繫結：類和樣式繫結是將元件例項的模型連線到元件模板中（目標）HTML 元素的 class 和 style 屬性的過程

• 屬性繫結：屬性繫結是將元件例項的模型連線到元件模板中（目標）HTML 元素/其他元件的屬性的過程。Angular 將 HTML 元素的屬性公開為屬性，並將屬性名稱轉換為駝峰命名法。這將有助於透過屬性繫結連線 HTML 元素的所有屬性。

• 事件繫結：事件繫結是將元件例項方法的模型連線到（目標）HTML 元素/（另一個）元件的事件的過程。

• 雙向資料繫結：雙向資料繫結是屬性和事件繫結的組合，用於同步父元件和子元件之間的資料。

指令

Angular 提供了一個出色的功能，即指令，以通用方式為任何現有的 HTML 元素或元件新增其他行為。除了建立新的指令之外，Angular 還提供了一組預設的指令，以向 HTML 元素和元件提供其他功能，例如條件 (ngIf) 和迴圈 (ngFor)（在 Angular 模板中不可用）。我們將在後面的章節中學習內建指令的完整集合。

使用 ngIf 指令顯示或隱藏目標元素的一個簡單示例如下：

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

@Component({
   selector: 'app-my-section',
   templateUrl: './my-section.component.html',
   styleUrls: ['./my-section.component.css']
})
export class MySectionComponent {
   showSection: boolean = true;
}

這裡，showSection 是元件中具有真值變數。

<div *ngIf="showSection">
   I will be shown based on the `showSection` property in the component's
   instance.
</div>

這裡，“showSection”是 ngIf 使用的條件（模板表示式），用於決定 div 元素的呈現。如果條件成功，則它將呈現 div 元素，否則跳過元素的呈現。

如果 showSection 值更改為 false，則不會顯示該部分。

模板變數

模板變數基本上用於引用模板中的以下任何一項。

• HTML 元素
• 指令
• 元件
• 模板內的模板 (ng-template)
• Web 元件

讓我們為 input 元素和 span 元素建立一個引用，並將輸入元素中輸入的值顯示到 span 元素中。

<input #source /> <span #target></span>

<div style="padding-top: 5px;">
   <button (click)="target.innerText = source.value;">Show</button>
</div>

這裡，

• source 是引用 input 元素的模板變數

• target 是引用目標 span 元素的模板變數。

• 當用戶單擊按鈕時，click 事件將觸發並執行事件內指定的語句，並將使用者輸入的資料設定為 span 元素。

總結

Angular 中的模板提供了許多選項來非常有效地生成 UI 片段。它支援與元件例項的強大互動以同步資料。它可以防止指令碼注入，並透過防止模板中的副作用來提高模板輸出的可預測性。