一般来说,括号间的素材是一个模板表达式,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
运算符 -
自增和自减运算符:
++
和--
-
操作并赋值,例如
+=
和-=
-
位操作符
|
和&
-
模板表达式运算符(就比如说管道| 和安全导航操作符?.)
下一节:语句上下文