在angular6.0使用教程：HTTP请求远程服务器数据中我们是直接在list组件中通过HTTP请求远程服务器的接口来获取数据。而在angular6.0中，组件不应该直接获取或保存数据， 它们应该聚焦于展示数据，而把数据访问的职责委托给某个angular服务。接下来，我们来看看如何创建和使用angular6.0服务。
第一步：创建一个db服务：
ng g service db --module=app
创建一个全局的angular服务，可以在所有的组件中使用。
这时创建一个db.service.ts的服务文件，代码如下图：
angular6.0创建好服务后，不需要再到app.module.ts中引入了，如上图中的飘红处，意思是：在全局可用。
第二步：在angular6.0服务中通过HTTP请求远程数据：
1：引入HttpClient模块
import {HttpClient} from "@angular/common/http";
2：在服务的构造函数中实例化HttpClient
constructor(private http:HttpClient) { }
3：在服务中添加getList方法用来请求远程数据：
getList():Observable<any>{
return this.http.get("/api/dream/index.php/home/index/angular");
}
4：这里使用了Observable可观察对象，采用的是异步操作，所以要引入Observable模块：
import {Observable} from "rxjs/internal/Observable";
第三步：在list组件中调用angular服务获取到的远程数据：
1：在list组件中引入db.service服务：
import {DbService} from "../db.service";
2：在list构造函数中实例化db.service服务：
constructor(private db:DbService) { }
3：定义一个接收数据的变量：
postList:any;
4：在ngOnInit初始化中调用db服务的getList方法来获取数据：
ngOnInit() {
this.db.getList().subscribe(data=>{ this.postList = data }) //把获取到的远程数据赋值给postList变量
}
5：前台调用数据：
<ul *ngFor="let v of postList">
<a routerLink="/post/{{v.id}}">
<img src="{{v.thumb}}" alt="">
<h3>{{v.name}}</h3>
</a>
</ul>
通过上面的几步，我们创建了angular6.0服务，并在服务中请求了远程服务器上的接品获取数据，然后在组件中引入服务调用服务获取到的数据。angular6.0的理念就是，服务用来请求和获取数据，组件只用来显示数据。
