範本語句link

Template statementslink

範本語句是可在 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.

在以下示例中，範本語句 deleteHero() 出現在 = 號右側的引號中，(event)="statement" 。

In the following example, the template statement deleteHero() appears in quotes to the right of the = symbol as in (event)="statement".

      
        content_copy
      
      <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.

語法link

Syntaxlink

與範本表示式一樣，範本語句使用類似於 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

語句的上下文link

Statement contextlink

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

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.

      
        content_copy
      
      <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.

      
        content_copy
      
      <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.

範本語句最佳實踐link

Statement best practiceslink

• 簡明

  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 window or document. For example, template statements can't call console.log() or Math.max().