範本語句
Template statements
範本語句是可在 HTML 中用於響應使用者事件的方法或屬性。使用範本語句，你的應用可以透過諸如顯示動態內容或提交表單之類別的動作吸參考戶。
Template statements are methods or properties that you can use in your HTML to respond to user events. With template statements, your application can engage users through actions such as displaying dynamic content or submitting forms.
關於本指南中的語法和程式碼段的資訊，請參閱
See the
在以下示例中，範本語句 deleteHero() 出現在 = 號右側的引號中，(event)="statement" 。
In the following example, the template statement deleteHero() appears in quotes to the right of the = symbol as in (event)="statement".
<button (click)="deleteHero()">Delete hero</button>
當用戶單擊 Delete hero 按鈕時，Angular 就會呼叫元件類別中 deleteHero() 方法。
When the user clicks the Delete hero button, Angular calls the deleteHero() method in the component class.
你可以將範本語句與元素、元件或指令一起使用以響應事件。
You can use template statements with elements, components, or directives in response to events.
響應事件是 Angular 單向資料流的一個方面。你可以在單個事件迴圈中更改應用程式中的任何內容。
Responding to events is an aspect of Angular's unidirectional data flow. You can change anything in your application during a single event loop.
語法
Syntax
與範本表示式一樣，範本語句使用類似於 JavaScript 的語言。但是，範本語句的解析器與範本表示式的解析器有所不同。此外，範本語句解析器特別支援基本賦值 = 和帶有分號 ; 的串聯表示式。
Like template expressions, template statements use a language that looks like JavaScript. However, the parser for template statements differs from the parser for template expressions. In addition, the template statements parser specifically supports both basic assignment, =, and chaining expressions with semicolons, ;.
不允許使用以下 JavaScript 和範本表示式語法：
The following JavaScript and template expression syntax is not allowed:
new遞增和遞減運算子
++和--increment and decrement operators,
++and--賦值運算子，例如
+=和-=operator assignment, such as
+=and-=按位運算子，例如
|和&the bitwise operators, such as
|and&the pipe operator
語句的上下文
Statement context
語句具有上下文 - 也就是語句所屬應用中的特定部分。
Statements have a context—a particular part of the application to which the statement belongs.
語句只能參考語句上下文中的內容，通常是元件實例。例如，(click)="deleteHero()" 中的 deleteHero() 就是下面程式碼段中的元件方法之一。
Statements can refer only to what's in the statement context, which is typically the component instance. For example, deleteHero() of (click)="deleteHero()" is a method of the component in the following snippet.
<button (click)="deleteHero()">Delete hero</button>
語句上下文還可以參考範本自身的上下文屬性。在下面的示例中，元件的事件處理方法 onSave() 將範本自己的 $event 物件用作引數。在接下來的兩行中， deleteHero() 方法接收了範本輸入變數 hero 作為引數，而 onSubmit() 接收了範本參考變數 #heroForm 作為引數。
The statement context may also refer to properties of the template's own context. In the following example, the component's event handling method, onSave() takes the template's own $event object as an argument. On the next two lines, the deleteHero() method takes a template input variable, hero, and onSubmit() takes a template reference variable, #heroForm.
<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
在此示例中， $event 物件、hero 和 #heroForm 的上下文都是其範本。
In this example, the context of the $event object, hero, and #heroForm is the template.
範本上下文中的名稱優先於元件上下文中的名稱。前面 deleteHero(hero) 中的 hero 是範本輸入變數，而不是元件的 hero 屬性。
Template context names take precedence over component context names. In the preceding deleteHero(hero), the hero is the template input variable, not the component's hero property.
範本語句最佳實踐
Statement best practices
簡明
Conciseness
透過只使用方法呼叫或基本屬性賦值，讓範本語句最少化。
Keep template statements minimal by using method calls or basic property assignments.
在上下文中工作
Work within the context
範本語句的上下文可以是元件類別實例或範本。因此，範本語句無法參考全域性名稱空間中的任何內容，例如
window或document。例如，範本語句不能呼叫console.log()或Math.max()。The context of a template statement can be the component class instance or the template. Because of this, template statements cannot refer to anything in the global namespace such as
windowordocument. For example, template statements can't callconsole.log()orMath.max().
