• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > angular开发 > angular6.0使用教程:创建和使得angular服务

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

    作者: 分类:angular开发 点击: 933 次
    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的理念就是,服务用来请求和获取数据,组件只用来显示数据。



      QQ二维码

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

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

    或许你会感兴趣的文章:

    一条回应:“angular6.0使用教程:创建和使得angular服务”

    1. asd123456说道:

      很有用,刚好在学angular,谢谢!

    发表评论

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

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