Angular 模板语句

模板语句

模板语句是可在 HTML 中用于响应用户事件的方法或属性。使用模板语句，你的应用可以通过诸如显示动态内容或提交表单之类的动作吸引用户。

关于本指南中的语法和代码段的信息，请参阅Template syntax / 下载范例。

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

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

当用户单击 Delete hero 按钮时，Angular 就会调用组件类中 ​deleteHero()​ 方法。

可以将模板语句与元素、组件或指令一起使用以响应事件。

响应事件是 Angular 单向数据流的一个方面。你可以在单个事件循环中更改应用程序中的任何内容。

语法

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

不允许使用以下 JavaScript 和模板表达式语法：

• ​new ​
• 递增和递减运算符 ​++​ 和 ​-- ​
• 赋值运算符，例如 ​+=​ 和 ​-= ​
• 按位运算符，例如 ​|​ 和 ​& ​
• 管道操作符

语句的上下文

语句具有上下文 - 也就是语句所属应用中的特定部分。

语句只能引用语句上下文中的内容，通常是组件实例。例如，​(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()​ 。