首页 > angular开发 > angular6.0使用教程:创建和使得angular服务

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

作者: 分类:angular开发 点击: 95 次
wordpress CMS主题:ssmay主题

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

    第一步:创建一个db服务:

    ng  g  service  db  --module=app

    创建一个全局的angular服务,可以在所有的组件中使用。

    这时创建一个db.service.ts的服务文件,代码如下图:

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

    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的理念就是,服务用来请求和获取数据,组件只用来显示数据。

文章作者:高时银博客
本文地址:http://wanlimm.com/77201806255723.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

上一篇:
下一篇:
wordpress CMS主题:ssmay主题

或许你会感兴趣的文章:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.