- 加入我的QQ群
- 关注我的百家号
扫描下面的二维码,“关注”我的百家号。
在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的理念就是,服务用来请求和获取数据,组件只用来显示数据。
很有用,刚好在学angular,谢谢!