创新互联Angular教程：Angular模板语句

模板语句

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

创新互联是一家专业提供宿松企业网站建设,专注与成都做网站、成都网站设计、H5高端网站建设、小程序制作等业务。10年已为宿松众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

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

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

Delete hero

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

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

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

语法

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

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

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

语句的上下文

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

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

Delete hero

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

Save
{{hero.name}}
 ... 

在这个例子中， ​$event​ 对象、​hero ​和 ​#heroForm​ 的上下文都是其模板。

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

模板语句最佳实践

• 简明

使用方法调用或基本属性赋值，来让模板语句保持最小化。

• 在上下文中工作

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

网站题目：创新互联Angular教程：Angular模板语句
本文地址：http://www.gawzjz.com/qtweb/news29/187329.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联