本文共计2122个文字，预计阅读时间需要9分钟。
gistfile1.txt 显示数据 {hero.name} 3>There are many heroes! 插值表达式 My current hero is {currentHero.name} {title} The sum of 1 + 1 is {1 + 1} 数据绑定是一种机制
gistfile1.txt
显示数据
3">There are many heroes!
插值表达式
My current hero is {{currentHero.name}}
{{title}}
The sum of 1 + 1 is {{1 + 1}}
数据绑定是一种机制
#1 从数据源到视图目标，一般用于插值表达式 Property Attribute 类 样式
{{expression}}
[target]="expression"
bind-target="expression"
#2 从视图目标到数据源，一般用在事件
(target)="statement"
on-target="statement"
#3 双向
[(target)]="expression"
bindon-target="expression"
HTML attribute 与 DOM property 的对比 angular.cn/guide/template-syntax
模板绑定是通过 property 和事件来工作的，而不是 attribute。在 Angular 的世界中，attribute 唯一的作用是用来初始化元素和指令的状态。 当进行数据绑定时，只是在与元素和指令的 property 和事件打交道，而 attribute 就完全靠边站了。
把这个思维模型牢牢的印在脑子里，接下来，学习什么是绑定目标。
数据绑定的目标是 DOM 中的某些东西。 这个目标可能是（元素 | 组件 | 指令的）property、（元素 | 组件 | 指令的）事件，或(极少数情况下) attribute 名。 下面是的汇总表
#1 绑定元素的 property 组件的 property 指令的 property
#2 绑定 元素的事件 组件的事件 指令的事件
click me
#3 双向绑定 事件与 property
#4 绑定attribute（例外情况）
#5 绑定 class property
Special
#6 绑定style property
# 设置指令的属性
[ngClass] binding to the classes property
# 设置自定义组件的模型属性（这是父子组件之间通讯的重要途径）
不要忘了方括号 ，比如这个就是错的
我们通常得在插值表达式和属性绑定之间做出选择
在多数情况下，插值表达式是更方便的备选项。 实际上，在渲染视图之前，Angular 把这些插值表达式翻译成相应的属性绑定。
当要渲染的数据类型是字符串时，没有技术上的理由证明哪种形式更好。 我们倾向于可读性，所以倾向于插值表达式。
但数据类型不是字符串时，就必须使用属性绑定了。
假设下面的恶意内容 evilTitle = 'Template Syntax'; 幸运的是，Angular 数据绑定对危险 HTML 有防备。 在显示它们之前，它对内容先进行消毒。 不管是插值表达式还是属性绑定，都不会允许带有 script 标签的 HTML 泄漏到浏览器中。
attribute、class 和 style 绑定
考虑 ARIA， SVG 和 table 中的 colspan/rowspan 等 attribute。 它们是纯粹的 attribute，没有对应的属性可供绑定。如果想写出类似下面这样的东西，会报错
# Three-Four 我们需要 attribute 绑定来创建和绑定到这样的 attribute
One-Two
Five
Six
# 不用绑定直接设置 attribute 时是这样的：
Bad curly special
#可以把它改写为绑定到所需 CSS 类名的绑定；这是一个或者全有或者全无的替换型绑定。 （译注：即当 badCurly 有值时 class 这个 attribute 设置的内容会被完全覆盖）
Bad curly
# 还可以绑定到特定的类名。 当模板表达式的求值结果是真值时，Angular 会添加这个类，反之则移除它。
The class binding is special
This one is not so special
# 通过样式绑定，可以设置内联样式。样式绑定的语法与属性绑定类似。 但方括号中的部分不是元素的属性名，而由style前缀，一个点 (.)和 CSS 样式的属性名组成。 形如：[style.style-property]
# 有些样式绑定中的样式带有单位。在这里，以根据条件用 “em” 和 “%” 来设置字体大小的单位。
# 注意，样式属性命名方法可以用中线命名法，像上面的一样 也可以用驼峰式命名法，如fontSize
内置属性型指令
# 属性型指令会监听和修改其它HTML元素或组件的行为、元素属性（Attribute）、DOM属性（Property）。 它们通常会作为HTML属性的名称而应用在元素上。
# 很多Angular模块，比如RouterModule和FormsModule都定义了自己的属性型指令。 本节将会介绍几个最常用的属性型指令：
NgClass - 添加或移除一组CSS类
NgStyle - 添加或移除一组CSS样式
NgModel - 双向绑定到HTML表单元素
# 你既可以在初始化时调用setCurrentClassess()，也可以在所依赖的属性变化时调用。
This div is initially saveable, unchanged, and special
currentClasses: {};
setCurrentClasses() {
// CSS classes: added/removed per current state of component properties
this.currentClasses = {
'saveable': this.canSave,
'modified': !this.isUnchanged,
'special': this.isSpecial
};
}
# 我们可以根据组件的状态动态设置内联样式。 NgStyle绑定可以同时设置多个内联样式
This div is initially italic, normal weight, and extra large (24px).
currentStyles: {};
setCurrentStyles() {
// CSS styles: set per current state of component properties
this.currentStyles = {
'font-style': this.canSave ? 'italic' : 'normal',
'font-weight': !this.isUnchanged ? 'bold' : 'normal',
'font-size': this.isSpecial ? '24px' : '12px'
};
}
# ngModel指令通过自己的输入属性ngModel和输出属性ngModelChange隐藏了很多细节 替我们做很多事情
比如输入框内容变成大写
# 使用 ngModel 时需要 FormsModule 在使用ngModel指令进行双向数据绑定之前，我们必须导入FormsModule并把它添加到Angular模块的imports列表中
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular
/* Other imports */
@NgModule({
imports: [
BrowserModule,
FormsModule // <--- import into the NgModule
],
/* Other module metadata */
})
export class AppModule { }
内置结构型指令
结构型指令的职责是HTML布局。 它们塑造或重塑DOM的结构，这通常是通过添加、移除和操纵它们所附加到的宿主元素来实现的。
# NgIf 指令 可以往DOM中添加或从DOM中移除这个元素
# ngIf指令 通常会用来防范空指针错误。
Hello, {{currentHero.name}}
Hello, {{nullHero.name}}
# NgFor是一个重复器指令 —— 自定义数据显示的一种方式。 我们的目标是展示一个由多个条目组成的列表。
{{hero.name}}
# 带索引的*ngFor angular.cn/api/common/NgForOf
{{i + 1}} - {{hero.name}}
# NgSwitch指令类似于JavaScript的switch语句。 它可以从多个可能的元素中根据switch条件来显示某一个。 Angular只会把选中的元素放进DOM中
# NgSwitch实际上包括三个相互协作的指令：NgSwitch、NgSwitchCase 和 NgSwitchDefault，例子如下：
# 模板引用变量 ( #var )
# 声明一个名叫phone的变量来引用
元素
#之后 我们可以在模板中的任何地方引用模板引用变量
# 模板引用变量 (#phone) 和*ngFor部分看到过的模板输入变量 (let phone) 是不同的。 要了解详情，参见结构型指令一章。
# 模板引用变量的作用范围是整个模板。 不要在同一个模板中多次定义同一个变量名，否则它在运行期间的值是无法确定的。
# 我们也可以用ref-前缀代替#。 下面的例子中就用把fax变量声明成了ref-fax而不是#fax。
管道操作符 ( | )
# 在绑定之前，表达式的结果可能需要一些转换。例如，可能希望把数字显示成金额、强制文本变成大写，或者过滤列表以及进行排序。
# Angular 管道对像这样的小型转换来说是个明智的选择。 管道是一个简单的函数，它接受一个输入值，并返回转换结果。 它们很容易用于模板表达式中，只要使用管道操作符 (|) 就行了。
Title through uppercase pipe: {{title | uppercase}}
# json管道对调试绑定特别有用：
{{currentHero | json}}
#安全导航操作符 ( ?. ) 和空属性路径
The null hero's name is {{nullHero && nullHero.name}}
# 简单点就是
The null hero's name is {{nullHero?.name}}
