今天完成的事情：

Attribute 绑定、类绑定和样式绑定

绑定到 Attribute

绑定 ARIA Attribute

绑定到 colspan

要将 Attribute 绑定到 <td> 的 colspan Attribute：

使用以下语法指定 colspan：[attr.colspan] 

将 [attr.colspan] 设置为等于某个表达式

绑定到单个 CSS class

要创建单个类绑定，请使用前缀 class 后跟一个点和 CSS 类的名称，例如 [class.sale]="onSale"。onSale 为真值时添加类，在表达式为假值时（undefined 除外）删除类。欲知详情，请参见样式委托部分

绑定到多个 CSS 类

要绑定到多个类，请使用 [class] 来设置表达式 - 例如，[class]="classExpression"。表达式可以是用空格分隔的类名字符串，也可以是将类名作为键并将真或假表达式作为值的对象。对于对象格式，Angular 会在其关联的值为真时才添加类

绑定到单一样式

要创建对单个样式的绑定，请使用前缀 style 后跟一个点和 CSS style Attribute 的名称，例如 [style.width]="width"。 Angular 会将该 Attribute 设置为绑定表达式的值，这个值通常是一个字符串。（可选）你还可以添加单位扩展，例如 em 或 % ，它的值需要数字类型

绑定到多个样式

要切换多个样式，请绑定到 [style] Attribute，例如 [style]="styleExpression" 。该表达式通常是样式的字符串列表，例如 "width: 100px; height: 100px;" 。

将表达式格式化为对象，此对象以样式名作为键、以样式值作为值，例如 {width: '100px', height: '100px'}

双向绑定：

双向绑定为应用中的组件提供了一种共享数据的方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值

添加双向数据绑定

双向绑定工作原理

在sizer.component.html

在sizer.component.ts

模板变量

模板变量可以帮助你在模板的另一部分使用这个部分的数据。使用模板变量，你可以执行某些任务，比如响应用户输入或微调应用的表单

语法

Angular 是如何为模板变量赋值的：

如果在组件上声明变量，该变量就会引用该组件实例

如果在标准的 HTML 标记上声明变量，该变量就会引用该元素

如果你在 <ng-template> 元素上声明变量，该变量就会引用一个 TemplateRef 实例来代表此模板。关于 <ng-template> 的更多信息，请参阅结构型指令 中的 ng-template 部分

如果该变量在右侧指定了一个名字，比如 #var="ngModel" ，那么该变量就会引用所在元素上具有这个 exportAs 名字的指令或组件

将 NgForm 与模板变量一起使用

在hero-form.component.html中

在嵌套模板中访问

明天的计划：

学习指令