(六)Angular4 英雄征途HeroConquest-服务
为了不再把相同的代码复制一遍又一遍，我们要创建一个单一的可复用的数据服务，并且把它注入到需要它的那些组件中。 使用单独的服务可以保持组件精简，使其集中精力为视图提供支持，并且，借助模拟（Mock）服务，可以更容易的对组件进行单元测试，在本节中将实现一个异步的数据请求机制Promise。承接上一节，在这一节中， 从组件中移除数据访问逻辑意味着你可以随时更改这些实现方式，而不影响需要这些英雄数据的组件。
创建服务hero-get.service.ts
文件命名约定规则：服务名称的小写形式（基本名），加上.service后缀。 如果服务名称包含多个单词，我们就把基本名部分写成中线形式 (dash-case)。 例如，本节要创建的HeroGetService服务应该被定义在hero-get.service.ts文件中。
import { Injectable } from
'@angular/core';
import { HeroProperty } from
'./heroproperty';
import { HeroArray } from
'./mock-hero-data';
@Injectable()
export
class HeroGetService {
getHeros(): Promise<HeroProperty[]> {
return Promise.resolve(HeroArray);
}
}
app.component.ts文件
import { Component, OnInit } from '@angular/core';
import { HeroDetailComponent} from './hero-detail.component';
import { HeroArray } from './mock-hero-data';
import { HeroProperty} from './heroproperty';
//在app.component.ts这个组件中导入HeroGetService
//以便使用该服务
import { HeroGetService} from './hero-get.service';
@Component({
AppComponent的模板中。
// 这就是所谓的自定义标签
selector: 'app-root',
template: `<h1>{{title}}</h1>
<br>
<h2> -------{{from}}</h2>
<ul>
<li>
<div><label>ID:</label>{{hero.id}} <label> name:</label>{{hero.name}}</div>
</li>
</ul>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" >
<label>ID: </label>
<input [ngModel]="hero.id" (ngModelChange)="hero.id=$event">
</div>
<div>
<ul class="heroes">
<li *ngFor="let onehero of Heroes" (click)="onSelect(onehero)" [class.selected]="onehero===selectedHero">
<span class="badge">ID:{{onehero.id}}</span> {{onehero.name}}
</li>
</ul>
</div >
<app-hero-detail [DetailHero]="selectedHero"></app-hero-detail>
`
,
styleUrls: ['./app.component.css'],
//注册一个HeroGetService提供商，来告诉注入器如何创
//建HeroGetService。 因此在@Component组件的元数据
//底部添加providers数组属性
providers: [HeroGetService]
})
export class AppComponent implements OnInit {
//如下:添加一个构造函数，并定义一个私有属性。
//我们修改了HeroService的构造函数，我们不得不找出创
//建过此服务的每一处代码，并修改它。 围着补丁代码转圈
//很容易导致错误，还会增加测试负担。我们每次使用new都
//会创建一个新的服务实例（herogetService = new HeroGetService();）。 如果这个服务需要缓存英雄列
//表，并把这个缓存共享给别人呢？怎么办？ 没办法，做不
//到。我们把AppComponent锁定到HeroGetService的一个
//特定实现。 我们很难在不同的场景中切换实现。 例如，能离
//线操作吗？能在测试时使用不同的模拟版本吗？这可不容易。
//构造函数自己什么也不用做，它在参数中定义了一个私有
//的herogetService属性，并把它标记为注入HeroGetService的实例。
constructor(private herogetSevice: HeroGetService) {}
title = 'My conquest is the sea of stars.';
from = 'Reinhard von Lohengramm';
hero: HeroProperty = {
id: 9527,
name: 'Lee',
};
// Heros = HeroArray;
// 将以上改为如下，添加一个尚未初始化的Heros属性
Heroes: HeroProperty[];
selectedHero: HeroProperty;
onSelect(each: HeroProperty): void {
this.selectedHero = each;
}
getHerosData(): void {
this.herogetSevice.getHeros().then(heroesdata => this.Heroes = heroesdata);
//this.heroes = this.heroService.getHeroes();并不能做到异步获取数据
//HeroService立即返回一个模拟的英雄列表，它的
//远端服务器获取。当使用远端服务器时，用户不会等待服务
//器的响应。换句话说，用户没法在等待期间阻塞浏览器界
//面。为了协调视图与响应，我们可以使用（Promise），它是一
//种异步技术，它会改变getHeroes()方法的签名。它就是
//一个承诺，在有了结果时，它承诺会回调我们。 英雌调用
//一个异步服务去执行数据请求，并且给它一个回调函数。
//请求一旦完成，它就会调用我们的回调函数，并通过参数把工
//作结果或者错误信息传给我们。把回调函数作为参数传给承
//诺实例对象的then方法。在回调函数中，我们把服务返回的英
//雄数组赋值给组件的Heroes属性。
}
ngOnInit(): void {
this.getHerosData();
}
}
heroproperty.ts文件
export class HeroProperty {
id: number;
name: string;
}
mock-hero-data.ts文件
import { HeroProperty}
from './heroproperty';
export const HeroArray: HeroProperty[] = [
{
id:
1,
name: 'Asimov' },
{
id:
2,
name: 'IronMan' },
{
id:
3,
name: 'Gen' },
{
id:
4,
name: 'AnglovLee' }
];
hero-detail.component.ts文件
import { Component, Input } from '@angular/core';
import { HeroProperty} from './heroproperty';
@Component({
selector: 'app-hero-detail',
template: `
<div *ngIf="DetailHero">
<h2>{{DetailHero.name}} details!</h2>
<label>id: </label>{{DetailHero.id}}
<div>
<label>name: </label>
<input [(ngModel)]="DetailHero.name" placeholder="name"/>
</div>
</div>
`,
})
export class HeroDetailComponent {
@Input() DetailHero: HeroProperty;
}
app.module.ts文件
import { BrowserModule } from
'@angular/platform-browser';
import { NgModule } from
'@angular/core';
import { FormsModule } from
'@angular/forms';
import { AppComponent } from
'./app.component';
import { HeroDetailComponent} from
'./hero-detail.component';
@NgModule({
declarations: [
AppComponent,
HeroDetailComponent
],
imports: [
BrowserModule,
FormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
