angular总结小记两三点

为什么80%的码农都做不了架构师？>>>   

用ngModel实现双向数据绑定

从组件流到模板，再从模板流到组件 使用双向绑定语法：[(ngModel)]="";

1. 在AppModule中引入FormModule :import {FormMOdule} from @angular/forms;以便angular可以识别ngModel;
2. 在AppModule的imports中加入FormModule;

使用常用指令

在AppComponent中引入CommonModule,且引出根模块，然后在元素上绑定指令；

1. *ngIf用来控制一个元素的隐藏与显示；
2. *ngFor用来遍历数组；

css类绑定

[class.selected]="hero === selectedHero";-----当目标为所选目标时，添加css类.selected，根据这个可以单独设置样式；

属性绑定

官方文档说的是要把视图元素的属性设置为模板表达式时，就要用到属性绑定，主要有以下几种

• 把元素属性设置为组件属性的值； 这里把img的src属性绑定到组件的heroImgUrl属性上；

<img [src]="heroImageUrl">

• 组件 isUnchanged（未改变）时禁用按钮

<button [disabled]="isUnchanged">Cancel is disabled</button>

• 用ngClass设置指令属性

<div [ngClass]="classes">[ngClass] binding to the classes property</div>

• 设置自定义组件的模型属性（这是父子组件之间通讯的重要途径）

<app-hero-detail [hero]="currentHero"></app-hero-detail>

组件通过服务获取数据

---

1. 创建服务；
2. 在服务中获取数据：web服务，本地存储,模拟的数据源；
3. 提供服务：先把服务提供给依赖注入系统，注册提供商来创建和交付服务；
4. 通过@Injectable装饰器将服务提供商注册到根注入器上；
5. 注入服务：在组件的构造函数中添加服务实例；
6. 服务已经准备好插入到组件中了；

使用Observable异步获取数据

---

因为服务从数据源获取数据，组件从服务获取数据两者之间大都数时候不是同步的，需要用到异步操作 ；

1. import {Observable,of} from 'rxjs';
2. 在服务中获取数据时等待返回Observale<数据>
3. 在组件订阅：使用subscibe()订阅，subscribe()会把数据通过回调函数返回到组件中；

转载于:https://my.oschina.net/hyzccc/blog/1837366