在这里我们有一个问题。为什么需要服务? 之前我们在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(): Observable<Hero[]> { //Observable<Hero[]>是getHeroes的返回值.
//如果不返回Observable component 将不能使用subscribe
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中获取数据了。显示结果和以前一样