模板

Angular 模板就是一块 HTML，我们已经学会了怎么为应用的组件定义静态的HTML。

模板标签

静态的页面始终无法满足我们的需求，所以我们要在模板中绑定动态的值。

借助模板标签可以将动态的值绑定到HMTL当中，模板标签的语法是： {{表达式 }} ，这些括号也叫“小胡子标签”，这种语法也叫做插值语法。

模板标签中可以写模板表达式。表达式当中的变量或者方法可以来自于该组件的实例。

xxxxxxxxxx
//组件文件product-list.component.ts
export class ProductListComponent implements OnInit {
  title:string;//类中定义了一个属性title   
  itemImageUrl='https://www.baidu.com/img/flexible/logo/pc/result.png'
  suffixStr() {
   return '!!!'
  }
  constructor() {
    this.title='商品列表页'
   }
  ngOnInit(): void {
  }

}

xxxxxxxxxx
<!-- 组件模板文件product-list.component.html -->
<p >
<!-- 最终title会被渲染成字符串"商品列表页" -->
{{title}} 
<!--拼接title，最终这里会被渲染成商品列表页!!! -->
{{title+suffixStr()}}
<!--可以写入三目运算这样的表达式 --> 
{{1==1?'a':'b'}}
<!--花括号里面如果直接想写字符串，记得要加引号 -->
{{'hello'}}
<!--得到itemImageUrl表达式的值再赋值给src属性 -->
<img src="{{itemImageUrl}}">
</p>

使用插值语法，Angular实际执行了下面的操作：

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

模板表达式上下文

模板中的表达式所处的上下文环境是什么，也就是它引用的变量可以来自哪里？

通常来自组件类的实例。

也可以来自模板上下文。

实时效果反馈

1.下列描述错误的是：

A Angular中的模板就是HTML

B 模板中可以绑定动态值

C 模板标签默认使用 { }

D 模板表达式上下文通常为组件类的实例

答案

1=>C