数据绑定

Angular核心概念之三：数据绑定（binding）

Angular 根据数据流的方向提供三种类型的数据绑定：

• 从源到视图
• 从视图到源
• 双向，从视图到源再到视图

[]、()、[()] 这些绑定标点以及前缀，用来指定数据流的方向

• 使用 [] 从源绑定到视图
• 使用 () 从视图绑定到源
• 使用 [()] 进行双向绑定，将视图绑定到源再绑定到视图

将表达式或语句放在双引号 "" 中，等号的右侧

模板表达式类似于 JavaScript 表达式。许多 JavaScript 表达式都是合法的模板表达式，但以下例外。
你不能使用那些具有或可能引发副作用的 JavaScript 表达式，包括：

• 赋值（=, +=, -=, ...）
• 运算符，比如 new、typeof 或 instanceof 等。
• 链接表达式;或，
• 自增和自减运算符：++ 和 --
• 一些 ES2015+ 版本的运算符

和 JavaScript 语法的其它显著差异包括：

• 不支持位运算，比如 | 和 &
• 新的模板表达式运算符，比如 |

Angular中的数据绑定

• 插值（HTML绑定）

  {{NG表达式}}

  NG表达式可以执行的代码
  • 算术运算？--可以
  • 比较运算？--可以
  • 逻辑运算？--可以
  • 三目运算？--可以
  • 调用函数？--可以
  • 创建对象？--不可以
  • JSON序列化？--不可以
• 属性（Property）绑定

  <img [src]="'assets/'+imgUrl">

  属性绑定通常赋值为变量，如果赋值为常量（如字符串常量）必须用单引号''扩起来
• 事件绑定

  (click)="addValue()"

  事件名用（）括起来，处理函数名后必须跟（）
• 指令绑定
• 基于 ngModel 的双向数据绑定