Angular 模板語句

模板語句

模板語句是可在 HTML 中用于響應(yīng)用戶事件的方法或?qū)傩?。使用模板語句，你的應(yīng)用可以通過諸如顯示動(dòng)態(tài)內(nèi)容或提交表單之類的動(dòng)作吸引用戶。

關(guān)于本指南中的語法和代碼段的信息，請參閱Template syntax / 下載范例。

在以下示例中，模板語句 ?deleteHero()? 出現(xiàn)在 ?=? 號右側(cè)的引號中，?(event)="statement"? 。

<button (click)="deleteHero()">Delete hero</button>

當(dāng)用戶單擊 Delete hero 按鈕時(shí)，Angular 就會調(diào)用組件類中 ?deleteHero()? 方法。

可以將模板語句與元素、組件或指令一起使用以響應(yīng)事件。

響應(yīng)事件是 Angular 單向數(shù)據(jù)流的一個(gè)方面。你可以在單個(gè)事件循環(huán)中更改應(yīng)用程序中的任何內(nèi)容。

語法

與模板表達(dá)式一樣，模板語句使用類似于 JavaScript 的語言。但是，模板語句的解析器與模板表達(dá)式的解析器有所不同。此外，模板語句解析器特別支持基本賦值 ?=? 和帶有分號 ?;? 的串聯(lián)表達(dá)式。

不允許使用以下 JavaScript 和模板表達(dá)式語法：

• ?new ?
• 遞增和遞減運(yùn)算符 ?++? 和 ?-- ?
• 賦值運(yùn)算符，例如 ?+=? 和 ?-= ?
• 按位運(yùn)算符，例如 ?|? 和 ?& ?
• 管道操作符

語句的上下文

語句具有上下文 - 也就是語句所屬應(yīng)用中的特定部分。

語句只能引用語句上下文中的內(nèi)容，通常是組件實(shí)例。例如，?(click)="deleteHero()"? 中的 ?deleteHero()? 就是下面代碼段中的組件方法之一。

<button (click)="deleteHero()">Delete hero</button>

語句上下文還可以引用模板自身的上下文屬性。在下面的示例中，組件的事件處理方法 ?onSave()? 將模板自己的 ?$event? 對象用作參數(shù)。在接下來的兩行中， ?deleteHero()? 方法接收了模板輸入變量 ?hero ?作為參數(shù)，而 ?onSubmit()? 接收了模板引用變量 ?#heroForm? 作為參數(shù)。

<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>

在這個(gè)例子中， ?$event? 對象、?hero ?和 ?#heroForm? 的上下文都是其模板。

模板上下文中的名稱優(yōu)先于組件上下文中的名稱。前面 ?deleteHero(hero)? 中的 ?hero ?是模板輸入變量，而不是組件的 ?hero ?屬性。

模板語句最佳實(shí)踐

• 簡明

使用方法調(diào)用或基本屬性賦值，來讓模板語句保持最小化。

• 在上下文中工作

模板語句的上下文可以是組件類實(shí)例或模板。因此，模板語句無法引用全局名稱空間中的任何內(nèi)容，例如 ?window ?或 ?document?。例如，模板語句不能調(diào)用 ?console.log()? 或 ?Math.max()? 。