目的:为了不再把相同的代码复制一遍又一遍,我们要创建一个单一的可复用的数据服务,并且把它注入到需要它的那些组件中。
※ 文件命名约定:服务名称的小写形式(基本名),加上.service
后缀,如果服务名称包含多个单词,我们就把基本名部分写成中线形式 (dash-case)。
1.新建服务 xx.server.ts
导入 Angular 的Injectable
函数:import { Injectable } from '@angular/core';
※ 装饰器:@Injectable() 修饰函数,不要忘了写圆括号!!!
@Injectable()
export class HeroService {
getHeroes(): Hero[] {
return HEROES;
}
}
2.在需要它的那些组件创建一个构造函数
constructor(private heroService: xxService) { }
※ 在构造函数中注入xxService
,并且把它保存在一个私有的heroService
字段中
providers: [HeroService]
※ providers
数组告诉 Angular,当它创建新的组件时,也要创建一个HeroService
的新实例