Angular 模板語(yǔ)句

模板語(yǔ)句

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

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

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

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

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

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

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

語(yǔ)法

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

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

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

語(yǔ)句的上下文

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

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

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

語(yǔ)句上下文還可以引用模板自身的上下文屬性。在下面的示例中，組件的事件處理方法 ?onSave()? 將模板自己的 ?$event? 對(duì)象用作參數(shù)。在接下來(lái)的兩行中， ?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? 對(duì)象、?hero ?和 ?#heroForm? 的上下文都是其模板。

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

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

• 簡(jiǎn)明

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

• 在上下文中工作

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