用ngModel实现双向数据绑定
从组件流到模板，再从模板流到组件 使用双向绑定语法：[(ngModel)]="";
- 在AppModule中引入FormModule :import {FormMOdule} from @angular/forms;以便angular可以识别ngModel;
- 在AppModule的imports中加入FormModule;
使用常用指令
在AppComponent中引入CommonModule,且引出根模块，然后在元素上绑定指令；
- *ngIf用来控制一个元素的隐藏与显示；
- *ngFor用来遍历数组；
css类绑定
[class.selected]="hero === selectedHero";-----当目标为所选目标时，添加css类.selected，根据这个可以单独设置样式；
属性绑定
官方文档说的是要把视图元素的属性设置为模板表达式时，就要用到属性绑定，主要有以下几种
- 把元素属性设置为组件属性的值； 这里把img的src属性绑定到组件的heroImgUrl属性上；
- 组件
isUnchanged（未改变）时禁用按钮
- 用ngClass设置指令属性
[ngClass] binding to the classes property
- 设置自定义组件的模型属性（这是父子组件之间通讯的重要途径）
组件通过服务获取数据
- 创建服务；
- 在服务中获取数据：web服务，本地存储,模拟的数据源；
- 提供服务：先把服务提供给依赖注入系统，注册提供商来创建和交付服务；
- 通过@Injectable装饰器将服务提供商注册到根注入器上；
- 注入服务：在组件的构造函数中添加服务实例；
- 服务已经准备好插入到组件中了；
使用Observable异步获取数据
因为服务从数据源获取数据，组件从服务获取数据两者之间大都数时候不是同步的，需要用到异步操作 ；
- import {Observable,of} from 'rxjs';
- 在服务中获取数据时等待返回Observale<数据>
- 在组件订阅：使用subscibe()订阅，subscribe()会把数据通过回调函数返回到组件中；