Skip to main content

文本插值

在 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 将应用以下逻辑来确定上下文:

  • 模版变量的名称(模版输入变量&模版引用变量)

  • 指令上下文中的名称

  • 组件成员

为了避免变量遮盖另一个上下文中的变量,请保持变量名唯一

表达式的最佳实践

  1. 没有副作用(读取值而不更改值)

  2. 快速执行,表达式不应该依赖太多资源