Angular - 模板語句

模板語句用於透過 HTML 文件中的事件與使用者互動。模板語句允許開發人員響應使用者操作呼叫元件的方法。此外，它還允許開發人員使用多個以冒號 (;) 分隔的語句在模板本身中編寫簡單的邏輯。在本章中，我們將進一步瞭解模板語句。

語法

模板語句類似於 JavaScript 表示式，但存在以下例外。

複合賦值運算子：模板語句不支援複合賦值運算子（+= 和 -=）。與模板表示式相比，語句支援普通的賦值運算子 (=)。
new 關鍵字：模板不允許建立新物件。任何物件都應在元件類中建立。在元件中建立的物件將在模板中可用。
增量和減量運算子：模板不允許副作用。由於增量和減量運算子具有副作用，因此它們被排除在外。
位運算子：不支援位運算子（| 和 &）。
管道運算子：模板語句不支援管道 (|) 運算子。

與模板表示式相比，語句支援賦值運算子和鏈式運算子（; 和 ,）

如何在模板中使用模板語句

模板語句可以寫入雙引號內，並將其設定為元件或元素的事件屬性的值，如下所示：

<button (click)="<statements>">Click here</button>

這裡，

(click) 表示按鈕的點選事件。它使用事件繫結的概念，這將在事件繫結章節中進行解釋。
<statement> 可以是上一節中指定的任何模板語句。

模板語句上下文

與模板表示式類似，模板語句具有三個上下文，

元件的屬性/方法：元件的屬性/方法是在元件例項中設定的屬性/方法。例如，元件中的使用者物件 (user) 可以在模板中按如下方式使用：

<button (click)="showUser(user)">Show user</button)

這裡，user 屬性和 showUser() 方法的上下文是元件的例項。

模板輸入變數：模板輸入變數是透過指令分配給模板的輸入。例如，ngFor 指令將迴圈的索引和當前項傳送到模板，如下所示：

<ul>
   <li *ngFor="let user of users" (click)="showUser(user)">{{user.name}}</li>
</ul>

這裡，user 屬性的上下文是模板輸入變數。

模板引用變數：模板引用變數基本上是在給定模板中表示 HTML 元素、元件和指令，如下所示：

<input #user /> <span>{{ user.value }}</span>
<button (click)="showUser(user.value)">Show User</button>

這裡，user 和 user.value 的上下文是模板引用變數。

在名稱衝突的情況下，上下文的優先順序如下：

模板變數
指令上下文的變數
元件的成員變數和方法

Angular 團隊建議在元件的方法中使用複雜的邏輯，並透過模板語句呼叫它，而不是嘗試使用模板語句在模板本身中編寫邏輯。

工作示例

讓我們考慮一個透過使用者操作顯示/隱藏部分的簡單場景。

步驟 1：使用 angular CLI 建立一個新應用程式，如下所示：

$ ng new my-app

步驟 2：使用 angular CLI 建立一個元件 BlockWithShowHide，如下所示：

$ ng generate component BlockWithShowHide
CREATE src/app/block-with-show-hide/block-with-show-hide.component.css (0 bytes)
CREATE src/app/block-with-show-hide/block-with-show-hide.component.html (35 bytes)
CREATE src/app/block-with-show-hide/block-with-show-hide.component.spec.ts (639 bytes)
CREATE src/app/block-with-show-hide/block-with-show-hide.component.ts (255 bytes)
UPDATE src/app/app.module.ts (525 bytes)

步驟 3：接下來，開啟元件檔案 src/app/block-with-show-hide/block-with-show-hide.component.ts 並新增一個變數 hideStatus 來表示顯示/隱藏狀態

hideStatus: boolean = false;

步驟 4：接下來，新增兩個方法 show() 和 hide() 以根據使用者的操作更改 hideStatus 變數的值。

show() {
   this.hideStatus = false;
}

hide() {
   this.hideStatus = true;
}

步驟 5：接下來，開啟元件的模板檔案 src/app/block-with-show-hide/block-with-show-hide.component.html 並新增一個帶有兩個按鈕的塊，

<div>
   <div>
      <p>Hi, I am simple section created for the testing purpose<p>
   </div>
   <button>Hide the section</button> 
   <button>Show the section</button>
</div>

步驟 6：接下來，將點選事件新增到按鈕並新增相應的的方法，如下所示：

<div>
   <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>
</div>

步驟 7：接下來，在要顯示/隱藏的塊中新增一個類屬性繫結 class.hide，其值為 hideStatus。

<div>
   <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>
</div>

這裡，

class.hide 表示隱藏 CSS 類，如果其值 hideStatus 為 true，則將設定該類。

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

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

@Component({
   selector: 'app-block-with-show-hide',
   templateUrl: './block-with-show-hide.component.html',
   styleUrls: ['./block-with-show-hide.component.css']
})
export class BlockWithShowHideComponent {
   hideStatus: boolean = false;
   
   show() {
      this.hideStatus = false;
   }
   
   hide() {
      this.hideStatus = true;
   }
}

步驟 9：接下來，在 CSS 檔案 src/app/block-with-show-hide/block-with-show-hide.component.css 中新增隱藏 CSS 類

.hide {
   display: none;
}

步驟 10：接下來，開啟應用程式元件的模板檔案 src/app/app.component.html 並新增我們的元件，如下所示：

<app-block-with-show-hide />

步驟 11：最後，執行應用程式並檢查塊是否根據使用者的操作顯示/隱藏。

總結

模板語句使應用程式能夠以安全有效的方式與使用者互動，而不會犧牲程式碼的靈活性以及應用程式豐富的使用者體驗。

列印頁面