Angular2模板语法总结

1、模板语法

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

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

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

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

数据绑定的目标是 DOM 中的某些东西。这个目标可能是（元素 | 组件 | 指令的）property、（元素 | 组件 | 指令的）事件，或(极少数情况下) 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 类绑定，可以从元素的 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绑定跟css绑定类似，
1、[class.className]

2、[ngClass]