使用插值语法显示值

前提条件

• 组件基础

• 模板基础

• 绑定语法

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

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

currentCustomer = 'Maria';

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

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

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

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

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

下一步呢？

• property 绑定

• 事件绑定