模板之数据绑定

模板的组成

模板由两部分组成，一部分是标准的 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';

---

end