codecamp

Angular 文本插值

文本插值

文本插值允许你将动态字符串值合并到 HTML 模板中。通过插值,你可以动态更改应用视图中显示的内容,例如显示包含用户名的自定义问候语。

要了解本指南中涉及的语法和代码片段,请参阅 现场演练 / 下载范例。

使用插值语法显示值

插值是指将表达式嵌入到被标记的文本中。默认情况下,插值使用双花括号 ​{{​ 和 ​}}​ 作为定界符。

为了说明插值的工作原理,请考虑一个包含 ​currentCustomer ​变量的 Angular 组件:

currentCustomer = 'Maria';

可以用插值在相应的组件模板中显示此变量的值:

<h3>Current customer: {{ currentCustomer }}</h3>

Angular 会用相应组件属性的字符串值替换掉 ​currentCustomer​。在这里,它的值是 ​Maria​。

在以下示例中,Angular 会求出 ​title ​和 ​itemImageUrl ​属性的值,以显示一些标题文本和图像。

<p>{{title}}</p>
<div><img src="{{itemImageUrl}}"></div>

模板表达式

模板表达式会产生一个值,它出现在双花括号 ​{{ }}​ 中。 Angular 解析该表达式并将其赋值给绑定目标的某个属性。目标可以是 HTML 元素、组件或指令。

用插值解析表达式

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

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

这些表达式也可以调用宿主组件的方法,就像下面用的 ​getVal()​:

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

通过插值,Angular 执行以下任务:

  1. 计算所有位于双花括号中的表达式。
  2. 将这些表达式的结果转换为字符串。
  3. 将这些结果融入相邻的字符串文本中。
  4. 将融合后的结果赋值给元素或指令的属性。

如果你想用别的分隔符来代替 ​{{​ 和 ​}}​,也可以通过 ​@Component()​ 元数据中的 ​interpolation ​选项来配置插值分隔符。

语法

模板表达式和 JavaScript 很相似。许多 JavaScript 表达式都是合法的模板表达式,但以下情况除外。

你不能使用那些具有或可能引发副作用的 JavaScript 表达式,包括:

  • 赋值 (​=​, ​+=​, ​-=​, ​...​)
  • 运算符,比如 ​new​、​typeof ​或 ​instanceof ​等。
  • 使用 ​;​ 或 ​,​ 串联起来的表达式
  • 自增和自减运算符:​++​ 和 ​--
  • 一些 ES2015+ 版本的运算符

和 JavaScript 语法的其它显著差异包括:

  • 不支持位运算,比如 ​|​ 和 ​&
  • 新的模板表达式运算符,例如 ​|​,​?.​ 和 ​!

表达式上下文

插值表达式具有上下文 —— 表达式所属应用中的特定部分。通常,此上下文就是组件实例。

在下面的代码片段中,表达式 ​recommended ​和 ​itemImageUrl2 ​表达式所引用的都是 ​AppComponent ​中的属性。

<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​。 它们只能引用表达式上下文中的成员。

防止命名冲突

表达式求值的上下文是模板变量、指令的上下文对象(如果有的话)以及组件成员的并集。如果所引用的名称在多个命名空间都有,则 Angular 将应用以下逻辑来确定上下文:

  1. 模板变量的名称。
  2. 指令上下文中的名称。
  3. 组件成员的名称。

为避免变量遮盖另一个上下文中的变量,请保持变量名称唯一。在以下示例中,​AppComponent ​模板在问候 ​customer ​Padma。

然后,一个 ​ngFor ​列出了 ​customers ​数组中的每个 ​customer​。

@Component({
  template: `
    <div>
      <!-- Hello, Padma -->
      <h1>Hello, {{customer}}</h1>
      <ul>
        <!-- Ebony and Chiho in a list-->
        <li *ngFor="let customer of customers">{{ customer.value }}</li>
      </ul>
    </div>
  `
})
class AppComponent {
  customers = [{value: 'Ebony'}, {value: 'Chiho'}];
  customer = 'Padma';
}

ngFor ​中的 ​customer ​处于一个 ​<ng-template>​ 的上下文中,所以它指向的是 ​customers ​数组中的 ​customer​,在这里是 Ebony 和 Chiho。此列表中不包含 Padma,因为那个 ​ customer 位于 ​ngFor ​以外的另一个上下文中。反之,​<h1>​ 中的 ​customer ​不包括 Ebony 或 Chiho,因为该 ​customer ​的上下文是组件类,而这个类中 ​customer ​的值是 Padma。

表达式最佳实践

使用模板表达式时,请遵循以下最佳实践:

  • 使用短表达式
  • 尽可能使用属性名称或方法调用。将应用和业务逻辑保留在组件中,这里更便于开发和测试。

  • 快速执行
  • Angular 会在每个变更检测周期之后执行模板表达式。许多异步活动都会触发变更检测周期,例如解析 Promise、HTTP 结果、计时器事件、按键和鼠标移动。

    表达式应尽快完成,以保持用户体验的性能,尤其是在速度较慢的设备上。

  • 没有可见的副作用
  • 根据 Angular 的单向数据流模型,除了目标属性的值之外,模板表达式不应更改任何应用状态。读取组件值不应更改其他显示值。该视图应在整个渲染过程中保持稳定。

幂等表达式能减少副作用
幂等的表达式是最理想的,因为它没有副作用,并且可以提高 Angular 的变更检测性能。 用 Angular 术语来说,幂等表达式总会返回完全相同的东西,除非其依赖值之一发生了变化。

在单独的一次事件循环中,被依赖的值不应该改变。 如果幂等的表达式返回一个字符串或数字,如果连续调用它两次,会返回相同的字符串或数字。 如果幂等的表达式返回一个对象(包括 ​Date ​或 ​Array​),如果连续调用它两次,会返回同一个对象的引用

对于 ​*ngFor​,这种行为有一个例外。​*ngFor​ 具有 ​trackBy ​功能,在迭代对象时它可以正确处理对象值的变化。


Angular 模板-介绍
Angular 模板语句
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Angular 开发指南

Angular 特性预览

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }