ts文件下载 Angular学习笔记（一）(5)

src/app/hero-detail.component.html (ngModel)

<input [(ngModel)]="hero.name">

在双向绑定中，数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值。

In two-way binding, a data property value flows to the input box from the component as with property binding. The user's changes also flow back to the component, resetting the property to the latest value, as with event binding.

Angular 在每个 JavaScript 事件循环中处理所有的数据绑定，它会从组件树的根部开始，递归处理全部子组件。

数据绑定在模板与对应组件的交互中扮演了重要的角色。

数据绑定在父组件与子组件的通讯中也同样重要。

Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令提供的操作对 DOM 进行转换。

组件是一个带模板的指令；@Component装饰器实际上就是一个@Directive装饰器，只是扩展了一些面向模板的特性。

虽然严格来说组件就是一个指令，但是组件非常独特，并在 Angular 中位于中心地位，所以在架构概览中，我们把组件从指令中独立了出来。

还有两种其它类型的指令：结构型指令和属性 (attribute) 型指令。

它们往往像属性 (attribute) 一样出现在元素标签中， 偶尔会以名字的形式出现，但多数时候还是作为赋值目标或绑定目标出现。

结构型指令通过在 DOM 中添加、移除和替换元素来修改布局。

下面的中用到了两个内置的结构型指令：

src/app/hero-list.component.html (structural)

content_copy<li *ngFor="let hero of heroes"></li>
<app-hero-detail *ngIf="selectedHero"></app-hero-detail>

告诉 Angular 为heroes列表中的每个英雄生成一个<li>标签。

表示只有在选择的英雄存在时，才会包含HeroDetail组件。

属性型指令修改一个现有元素的外观或行为。 在模板中，它们看起来就像是标准的 HTML 属性，故名。

ngModel指令就是属性型指令的一个例子，它实现了双向数据绑定。ngModel修改现有元素（一般是<input>）的行为：设置其显示属性值，并响应 change 事件。

src/app/hero-detail.component.html (ngModel)

content_copy<input [(ngModel)]="hero.name">

Angular 还有少量指令，它们或者修改结构布局（例如）， 或者修改 DOM 元素和组件的各个方面（例如和）。

当然，我们也能编写自己的指令。像HeroListComponent这样的组件就是一种自定义指令。

服务是一个广义范畴，包括：值、函数，或应用所需的特性。

几乎任何东西都可以是一个服务。 典型的服务是一个类，具有专注的、明确的用途。它应该做一件特定的事情，并把它做好。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-55834-5.html