Angular2 - 服务 - 代码天地

在这里我们有一个问题。为什么需要服务？之前我们在Entity里面返回过数据。也可以在Component定义获取数据。那是为什么?

组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。所以服务就应运而生。

我们可以在服务里面调用远程服务器API。获取数据。而不是在App中mack一些数据。而这些从远端获取数据他就属于完全的异步请求。在我们所了解的。javascript都是是顺序执行的单线程程序。他将不会等待远端服务器的response。但是我们可以利用callback函数来执行当异步数据返回结果。但是这不是一个好的解决方案。

所以Angular给我们提供了可观察(Observable)状态。Observable是RxJS中的一个关键字，这一节。我们将使用RxJS的of() 函数来魔力服务器返回了数据。

首先我们创建一个服务。并导入Observable，

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
//导入Hero和HEROES以便使用mock数据
import { Hero } from './hero'; 
import { HEROES } from './mock-heroes';

@Injectable({
  providedIn: 'root'
})
export class HeroesService {

  constructor() { }
}

我们给service添加一个getHeroes方法。

getHeroes(): Hero[] { //Hero[] 是getHeroes的返回值.

　　return of(HEROES); //HEROES 是之前我们定义的一个const 数组 
　　　　　　　　　　  //我们先返回mack数据，之后我们会使用HTTPClient来获取远程服务器数据
}

当我们想要在component中使用service（服务）时。我们需要import 这个服务，并在构造函数中注入这个服务

//导入HeroService
import { HeroService } from '../hero.service';

//注入HeroService 服务
constructor(private heroService: HeroService) { }

我们在component暴露一个接口，调用service返回的数据。以便html方便调用。

getHeroes(): void {
  this.heroService.getHeroes()//调用服务方法。
      .subscribe(heroes => this.heroes = heroes);
　　　　//subscribe 将是关键点。他会返回一个Observable。当远程服务器返回数据之后赋值给this.heroes;
}

在这里。我们前面提到了。在页面开始时。就会获取并显示数据。那么现在的component是显然不行的。所以我们需要在OnInit 钩子中来初始化调用这个方法。以便获取数据。Angular会在合适的时机调用OnInit钩子以便在html渲染是。我们已经获取到数据。

ngOnInit() {
    this.getHeroes();
}

那么现在我们就可以在html中获取数据了。显示结果和以前一样

Angular2 - 服务

猜你喜欢