1.创建一个以.service为后缀的ts文件
2.在文件中导入
import {Injectable} from '@angular/core';
3.创建class并使用@Injectable()装饰器
@Injectable()export class HeroService {}
4.添加方法到class中
5.在组件中导入service服务
import { HeroService } from './hero.service';
6.在@Component
组件的元数据底部添加providers
数组属性
providers: [HeroService]7.在组件的class中的构造方法里添加该服务
constructor(private heroService: HeroService) { }8.使用this.heroService.方法就可以用service中的方法了
9.service的代码
import {Injectable} from '@angular/core'; import { Hero } from './hero'; export const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }, { id: 13, name: 'Bombasto' }, { id: 14, name: 'Celeritas' }, { id: 15, name: 'Magneta' }, { id: 16, name: 'RubberMan' }, { id: 17, name: 'Dynama' }, { id: 18, name: 'Dr IQ' }, { id: 19, name: 'Magma' }, { id: 20, name: 'Tornado' } ]; @Injectable() export class HeroService { getHeroes(): Promise<Hero[]> { return Promise.resolve(HEROES); } getHeroesSlowly(): Promise<Hero[]> { return new Promise(resolve => { // Simulate server latency with 2 second delay setTimeout(() => resolve(this.getHeroes()), 2000); }); } }
10.官方文档地址
https://angular.cn/tutorial/toh-pt4