模板的组成
模板由两部分组成，一部分是标准的 HTML 标签，另一部分是 Angular 的模板语法。
模板语法可以分为三种类型：数据绑定，指令和管道。
这些模板语法会根据业务逻辑，数据状态来渲染 HTML。
数据绑定
组件类中的属性、方法和模板之间建立的一种带有方向性的映射关系，就叫做数据绑定。
数据绑定可以划分为以下四种：
文本插值
将组件类中的属性（字符串为主）绑定到模板，就叫做文本插值。
例子：
// html
<p>
{{ currentYear }}
</p>
// ts
currentYear = new Date().getFullYear();
*一般来说，双花括号里通常是变量或者表达式，Angular 会首先对这个变量或者表达式进行求值，然后将结果转换为字符串展示出来。
属性绑定
同样的，属性绑定也是将组件类中的属性绑定到模板上。比如下面的例子，文本插值和属性绑定可以达到相同的效果。
例子：
// html
<section>
<p title="{{ currentYear }}">文本插值</p>
<p [title]="currentYear">属性绑定</p>
</section>
// ts
currentYear = new Date().getFullYear();
*把要绑定的属性放在方括号 [ ] 内，Angular 就会将等号右侧的内容当作变量或表达式进行求值，否则，只会当作字符串处理。
在自定义标签中使用属性绑定，可以实现父组件向子组件传递数据的功能。
例子：
<talent-child *ngIf="param" [param]="param"></talent-child>
事件绑定
与前两种数据绑定方向相反，事件绑定是在模板中监听用户的行为，卖域名比如鼠标点击等，然后将这些行为和信息传递回组件类中，并做出相应的处理。
例子：
// html
<button (click)="onSave()">Save</button>
// ts
onSave(){
console.log('click');
}
在自定义标签中使用事件绑定（自定义事件），可以实现子组件向父组件传递数据的功能。
例子：
<talent-child (closeDrawer)="closeDrawer()"></talent-child>
*父组件和子组件之间的数据传递，不但涉及到属性绑定和事件绑定，还会使用到 @Input() 和 @Output()两个装饰器，在此就不再进行详细讲解，可以关注后续手记。
双向绑定
双向绑定是属性绑定和事件绑定的结合，用户的输入会自动更新到组件类中对应的属性上，而组件类中对应属性的变化也会立即反映到模板上。
例子：
// 模块文件需要引入：
// import { FormsModule } from "@angular/forms";
// html
<section>
<input [(ngModel)]="text">
<p>{{ text }}</p>
</section>
// ts
text = 'hello';
