模板

1.文本插值

在HTML模板中，使用{{ }}作为定界符。上下文空间包含模板属性和模板对应的组件实例。

执行顺序是：

a.计算表达式

b.将结果转换为字符串

c.将结果赋值给元素或指令的属性

例子：

{{ title }}

2.模板语句

模板语句是可在HTML中用于响应用户事件的方法或属性。

(event)="statement"，等号左侧是事件方法或属性，右侧是模板语句。

上下文空间包括模板自身的上下文属性，和组件实例。

例子：

Delete hero

...

3.属性绑定

属性绑定在单一方向上将值从组件的属性送到目标元素的属性。

逆向数据流，组件读取目标元素的属性或者调用其方法，使用ViewChild和ContentChild。

[src]="表达式"，等号左边使用[]放元素的属性（Property）名称。右边看作动态表达式进行求值。如果没有[]，右侧视为静态字符串值。

例子：

Disabled Button

[ngClass] binding to the classes property making this blue

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

a.绑定到 Attribute

One-Two

b.绑定到 class Attribute：可以用类绑定从元素的 class Attribute 中添加和删除 CSS 类名称

[class.sale]="onSale" 绑定单个类

[class]="classExpression" 绑定多个类，可以用空格分隔类型，或者类名的数组

c.绑定到 style Attribute

[style.width]="width" 绑定单个样式

[style]="styleExpression" 绑定多个样式

d.注入属性值

可使用Attribute参数装饰器，通过依赖注入将HTML的属性值传递给组件的构造函数。

constructor(@Attribute('type') public type: string) { }

@ATTRIBUTE()和@INPUT()的区别：实时更新传入的值用@INPUT()

5.事件绑定

通过事件绑定，可以侦听并响应用户操作，例如按键、鼠标移动、点击和触摸。

(event)="statement"