ANGULAR2 摘要（一）

 

 

• 绑定语法：

1. 咱们要重点突出下绑定目标和绑定源的区别。
2. 绑定的目标是在=左侧的部分， 源则是在=右侧的部分。
3. 绑定的目标是绑定符：[]、()或[()]中的属性或事件名， 源则是引号 (" ") 中的部分或插值符号 ({{}}) 中的部分。
4. 源指令中的每一个成员都会自动在绑定中可用。 不须要特别作什么，就能在模板表达式或语句中访问指令的成员。
5. 访问目标指令中的成员则受到限制。 只能绑定到那些显式标记为输入或输出的属性。

 

 

数据方向	语法	绑定类型
单向 从数据源 到视图目标	COPY CODE {{expression}} [target] = "expression" bind-target = "expression"	插值表达式 Property Attribute 类 样式
单向 从视图目标 到数据源	COPY CODE (target) = "statement" on-target = "statement"	事件
双向	COPY CODE [(target)] = "expression" bindon-target = "expression"	双向

 

• 绑定目标

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

绑定类型	目标	范例
Property Property	元素的 property 组件的 property 指令的 property	<img [src] = "heroImageUrl"> <hero-detail [hero]="currentHero"></hero-detail> <div [ngClass] = "{selected: isSelected}"></div>
事件	元素的事件 组件的事件 指令的事件	<button (click) = "onSave()">Save</button> <hero-detail (deleteRequest)="deleteHero()"></hero-detail> <div (myClick)="clicked=$event">click me</div>
双向	事件与 property	<input [(ngModel)]="heroName">
Attribute	attribute（例外状况）	<button [attr.aria-label]="help">help</button>
CSS 类	class property	<div [class.special]="isSpecial">Special</div>
样式	style property	<button [style.color] = "isSpecial ? 'red' : 'green'">

 

总结： DOM元素的property 用[ ]来绑定等号右边的表达式（表达式对应组件的一个属性或方法）。 

           事件通常用（）来绑定

 

 

• 变量#

能够在同一元素、兄弟元素或任何子元素中引用模板引用变量。

<!-- phone refers to the input element; pass its `value` to an event handler -->
<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>

#phone 变量就是input标签，在button中绑定click事件，将input的value当作参数传给callPhone事件方法。 

 

 

• 声明输入和输出属性

目标属性必须被显式的标记为输入或输出。

当咱们深刻HeroDetailComponent内部时，就会看到这些属性被装饰器标记成了输入和输出属性。

COPY CODE

@Input()  hero: Hero;
@Output() deleteRequest = new EventEmitter<Hero>();

另外，还能够在指令元数据的inputs或outputs数组中标记出这些成员。好比这个例子：

COPY CODE

@Component({
  inputs: ['hero'],
  outputs: ['deleteRequest'],
})

 

既能够经过装饰器，也能够经过元数据数组来指定输入/输出属性。但别同时用！

输入仍是输出？

Input or output?

输入属性一般接收数据值。 输出属性暴露事件生产者，如EventEmitter对象。

输入和输出这两个词是从目标指令的角度来讲的。

从HeroDetailComponent角度来看，HeroDetailComponent.hero是个输入属性， 由于数据流从模板绑定表达式流入那个属性。

从HeroDetailComponent角度来看，HeroDetailComponent.deleteRequest是个输出属性， 由于事件从那个属性流出，流向模板绑定语句中的处理器。

 

• 管道操做符 ( | )

在绑定以前，表达式的结果可能须要一些转换。例如，可能但愿把数字显示成金额、强制文本变成大写，或者过滤列表以及进行排序。

Angular 管道对像这样的小型转换来讲是个明智的选择。 管道是一个简单的函数，它接受一个输入值，并返回转换结果。 它们很容易用于模板表达式中，只要使用管道操做符 (|) 就好了。

<div>Title through uppercase pipe: {{title | uppercase}}</div>

管道操做符会把它左侧的表达式结果传给它右侧的管道函数。

 

• 安全导航操做符 ( ?. ) 和空属性路径

Angular 的安全导航操做符 (?.) 是一种流畅而便利的方式，用来保护出如今属性路径中 null 和 undefined 值。 下例中，当currentHero为空时，保护视图渲染器，让它免于失败。

 

The current hero's name is {{currentHero?.firstName}}

Angular 安全导航操做符 (?.) 是在属性路径中保护空值的更加流畅、便利的方式。 表达式会在它遇到第一个空值的时候跳出。 显示是空的，但应用正常工做，而没有发生错误。