文本插值
在 angular 中,模版就是 html。
在 html 中插值({{}}
)
在 {{}}
中我们可以写任何的 JS 表达式,angular 会在解析模版的时候帮助我们计算它的结果
通过插值,angular 可以实现以下功能
计算所有位于双花括号中的表达式。
将这些表达式的结果转换为字符串。
将这些结果融入相邻的字符串文本中。
将融合后的结果赋值给元素或指令的属性。
语法
大多数合法的 JS 表达式都是合法的模版表达式
但是你不能使用一些具有副作用的 JS 表达式
赋值 +=、-=、=等
运算符,例如:new typeof instanceof 等
使用 ; 或 , 串联起来的表达式
自增和自减运算符:++ 和 --
一些 ES2015+ 版本的运算符
表达式上下文
<!-- 下面两种方式都可以访问组件的属性 -->
<h4>{{recommended}}</h4>
<img [src]="itemImageUrl2" />
表达式也可以引用模板上下文中的属性,例如模板输入变量或模板引用变量。
下面的例子就使用了模板输入变量 customer。
<ul>
<li *ngFor="let customer of customers">{{customer.name}}</li>
</ul>
接下来的例子使用了模板引用变量 #customerInput。
<label>Type something: <input #customerInput />{{customerInput.value}} </label>
模板表达式不能引用全局命名空间中的任何东西,比如 window 或 document。它们也不能调用 console.log 或 Math.max。 它们只能引用表达式上下文中的成员。
总结一下
模版表达式上下文:
组件属性/方法
模版引用变量(#xxx)
模版输入变量 (*ngFor)
防止命名冲突
表达式求值的上下文是模板变量、指令的上下文对象(如果有的话)以及组件成员的并集。如果所引用的名称在多个命名空间都有,则 Angular 将应用以下逻辑来确定上下文:
模版变量的名称(模版输入变量&模版引用变量)
指令上下文中的名称
组件成员
为了避免变量遮盖另一个上下文中的变量,请保持变量名唯一
表达式的最佳实践
没有副作用(读取值而不更改值)
快速执行,表达式不应该依赖太多资源