angular--小白初学笔记摘要02（连载中）

一般来说，括号间的素材是一个模板表达式，Angular 先对它求值，再把它转换成字符串。 下列插值表达式通过把括号中的两个数字相加说明了这一点：

src/app/app.component.html

content_copy<!-- "The sum of 1 + 1 is 2" -->
<p>The sum of 1 + 1 is {{1 + 1}}</p>

这个表达式可以调用宿主组件的方法，就像下面用的 getVal()：

src/app/app.component.html

content_copy<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>

Angular 对所有双花括号中的表达式求值，把求值的结果转换成字符串，并把它们跟相邻的字符串字面量连接起来。最后，把这个组合出来的插值结果赋给元素或指令的属性。

 

表面上看，你在元素标签之间插入了结果和对标签的属性进行了赋值。 这样思考起来很方便，并且这个误解很少给你带来麻烦。 但严格来讲，这是不对的。

插值表达式是一个特殊的语法，Angular 把它转换成了属性绑定。

 

模板语句

模板语句用来响应由绑定目标（如 HTML 元素、组件或指令）触发的事件。 模板语句将在事件绑定一节看到，

它出现在 = 号右侧的引号中，

就像这样：(event)="statement"。（蓝色的就是模板语句）

src/app/app.component.html

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

模板语句有副作用。 这是事件处理的关键。因为你要根据用户的输入更新应用状态。

响应事件是 Angular 中“单向数据流”的另一面。 在一次事件循环中，可以随意改变任何地方的任何东西。

和模板表达式一样，模板语句使用的语言也像 JavaScript。 模板语句解析器和模板表达式解析器有所不同，特别之处在于它支持基本赋值 (=) 和表达式链 (; 和 ,)。

然而，某些 JavaScript 语法仍然是不允许的：

• new 运算符

• 自增和自减运算符：++ 和 --

• 操作并赋值，例如 += 和 -=

• 位操作符 | 和 &

• 模板表达式运算符（就比如说管道| 和安全导航操作符？.）

 

下一节：语句上下文