angular6.0使用教程：创建和使得angular服务

扫描下面的二维码，“关注”我的百家号。

在angular6.0使用教程：HTTP请求远程服务器数据中我们是直接在list组件中通过HTTP请求远程服务器的接口来获取数据。而在angular6.0中，组件不应该直接获取或保存数据， 它们应该聚焦于展示数据，而把数据访问的职责委托给某个angular服务。接下来，我们来看看如何创建和使用angular6.0服务。

angular4.0/5.0/6.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的理念就是，服务用来请求和获取数据，组件只用来显示数据。