使用angular创建一个service

来源：互联网发布：怎么样配衣服知乎编辑：程序博客网时间：2024/06/14 23:55

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

阅读全文

0 0