模版语句

模板语句是可在 HTML 中用于响应用户事件的方法或属性。

在以下示例中，模板语句 deleteHero() 出现在 = 号右侧的引号中，(event)="statement" 。

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

语法

与模板表达式一样，模板语句使用类似于 JavaScript 的语言。但是，模板语句的解析器与模板表达式的解析器有所不同。此外，模板语句解析器特别支持基本赋值 = 和带有分号 ; 的串联表达式。

语句的上下文

语句只能引用语句上下文中的内容，通常是组件实例。例如，(click)="deleteHero()" 中的 deleteHero() 就是下面代码段中的组件方法之一。

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

语句上下文还可以引用模板自身的上下文属性。在下面的示例中，组件的事件处理方法 onSave() 将模板自己的 \$event 对象用作参数。在接下来的两行中， deleteHero() 方法接收了模板输入变量 hero 作为参数，而 onSubmit() 接收了模板引用变量 #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 的上下文都是其模板。

模板上下文中的名称优先于组件上下文中的名称。前面 deleteHero(hero) 中的 hero 是模板输入变量，而不是组件的 hero 属性。

模板语句的上下文可以是组件类实例或模板。因此，模板语句无法引用全局名称空间中的任何内容，例如 window 或 document。例如，模板语句不能调用 console.log() 或 Math.max() 。