Angular(9) - 使用服务 - 官方教程英雄指南之添加服务 （详细解说）

1 为何需要服务？ 让我们带着思考去学习

• 服务是什么？服务就相当于是数据访问层，专门提供服务给其他模块的功能。就相当于服务专门于提供，处理数据，而模板则专心于展示，渲染数据
• 模板和服务的关系？模板应该专注于展示数据，只要是符合规格的数据给过来，模板都可以渲染，至于数据是怎么来的，模板不需要关心。
• 用了服务的好处 耦合性大大降低，模板专注于展示数据，服务专注于提供、处理数据

2 明白了服务后，我们就可以创建服务

ng generate service hero

3 创建后，我们将如下代码添加到 hero.service.ts

• 将 Hero 和 HEROES 导入进我们的服务
• 暴露一个方法， getHeroes(): Hero[] 并且返回一个 Hero[], 但方法中实际返回的是 HEROES ，它位于我们的 mock-heroes

src/app/hero.service.ts

import { Injectable } from '@angular/core';

import { Hero } from './hero';
import { HEROES } from './mock-heroes';

@Injectable({
  providedIn: 'root'
})
export class HeroService {

  constructor() { }

  getHeroes(): Hero[] {
    return HEROES;
  }
}

4 修改 HeroesComponent

src/app/heroes/heroes.component.ts

• 4.1 导入HeroService

import { HeroService } from '../hero.service';

• 4.2 注入HeroService ，往构造函数中添加一个私有的 heroService，其类型为 HeroService。这个参数同时做了两件事：1. 声明了一个私有 heroService 属性，2. 把它标记为一个 HeroService 的注入点，系统将会自动创建该对象的实例。

constructor(private heroService: HeroService) {}

• 4.3 创建获取数据的方法, getHeroes(): void

getHeroes(): void {
  this.heroes = this.heroService.getHeroes();
}

• 4.4 在页面初始化自动调用加载数据的方法

ngOnInit() {
  this.getHeroes();
}

5，好了，我们重新启动ng serve,会发现程序还是可以运行，不同的是，现在是服务提供数据了。