1、模板语法

• 1、插值表达式 (&nbsp;{{...}} ) 如：<span> {{data.tITle}}</span>
• 2、模板表达式（[PRoPErty]=“exPression”） 模板表达式产生一个值。 JavaScript
  中那些具有或可能引发副作用的表达式是被禁止的，包括： 赋值 (=, +=, -=, ...) new 运算符
  使用 ; 或 , 的链式表达式 自增和自减运算符：++ 和 --
• 3、模板语句（(event)="statement"） 模板语句用来响应由绑定目标（如 HTML 元素、组件或指令）触发的事件。
  如：<button (click)="delete ()">Delete </button>

• 4、双向数据绑定 ( [(...)]

  -tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="  ) " title="" data-original-title="复制">

        <input [(ngModel)]=“name"> )
        
  

一、绑定语法：概览

• Angular 提供了各种各样的数据绑定，本章将逐一讨论。 先从高层视角来看看 Angular 数据绑定及其语法。
  绑定的类型可以根据数据流的方向分成三类： 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

二、绑定目标

数据绑定的目标是 DOM 中的某些东西。 这个目标可能是（元素 | 组件 | 指令的）property、（元素 | 组件 | 指令的）事件，或(极少数情况下) attribute 名。 下面是的汇总表：

三、attribute、class 和 style 绑定

• attribute 绑定

attribute和property都可以翻译成属性。但是前面所说的属性绑定是Property binding，而这里说的是ttribute绑定。

Property——属性
attribute——特性

简单的理解:
Attribute就是DOM节点自带的属性，例如htML中常用的id、class 、title、align.
Property是这个DOM元素作为对象，其附加的内容, 例如childNodes、FirstChild.

注意：
常用的Attribute，例如id、class 、title等，已经被作为Property附加到DOM对象上，可以和Property一样取值和赋值。但是自定义的Attribute，就不会有这样的特殊优待。

因此，当元素没有属性可绑的时候，就必须使用 attribute 绑定。
考虑 ARIA， SVG 和 table 中的 colspan / rowspan 等 attribute。它们是纯粹的 attribute，没有对应的属性可供绑定。
如果想写出类似下面这样的东西，现状会令我们痛苦：

<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>

会得到这个错误：

  Template parse errors:
  Can't bind to 'colspan' since it isn't a known native property
 （模板解析错误：不能绑定到 'colspan'，因为它不是已知的原生属性）

正如提示中所说，元素没有colspan属性。它只有colspan特性，但是插值表达式和属性绑定只能设置属性，并不能设置特性attribute。

• CSS 绑定

借助 CSS 类绑定，可以从元素的 class attribute 上添加和移除 CSS 类名。

CSS 类绑定绑定的语法与属性绑定类似。 但方括号中的部分不是元素的属性名，而是由class前缀，一个点 (.)和 CSS 类的名字组成， 其中后两部分是可选的。形如：[class.class-name]。
1、[style.propertyName]，如：

  <p [style.fontSize]="fontSize">CSS 绑定方式1</p>
  

2、[ngStyle]
所以上面的例子，我们就可以直接使用[ngStyle]来动态绑定button的font-size和margin。如：

  <p  [ngStyle]="PStyle">CSS 绑定方式2</p>
  private PStyle: any = {
     margin: "10px",
     fontSize: "2em"
 }; 

3[class.classname]使用这种方式，我们可以根据绑定变量的值来动态添加或者移除css class。

• CLASS 绑定

class绑定跟css绑定类似，
1、[class.className]

2、[ngClass]