理解 Angular 服务

本文写于 2021 年 3 月 29 日

• 理解 Angular 服务
  • 什么是服务
  • 服务写法
    • 原理简述
    • 提供服务
      • 1. 在服务中注册
      • 2. 在 module 中注册
      • 3. 在组件中注册
  • 该在哪里注入服务

什么是服务

angular 的最佳实践推荐业务逻辑要尽量分门别类的抽离为一个个的 Service。

那么到底什么是 Service 呢？

service 意为服务，是一个广义的概念。

例如：饭馆提供的是吃饭服务、澡堂提供的是洗澡服务、学校提供的是授课服务……

那么对于写代码来说，服务是什么呢？

服务一般会包括值/状态、函数或各种特性，在 Angular 中，我们使用一个 class 来包裹这些。

但实际上，服务可以不是一个类，例如 React 的 context，通过闭包得到的返回值也可以是一个服务。

归根结底，可以这么总结：把一系列高度聚合的代码放到一起，就是一个服务。

对于前端来说，操心的事情其实有两件：

1. 用户体验（动画、跳转、样式……）
2. 业务逻辑与状态管理

Angular 推荐我们将第二点放到服务中来完成，从而令组件可以专心的负责用户体验。

比如从服务器获取数据、验证用户输入、日志……都应该放在服务，而不是特定的组件中。

当我们将这些委托给了各种可注入的服务之后，就可以将其注入到各个组件或者其他服务中进行调用。让你的代码更具适应性。

在 Angular 中，服务通常是一个单例。

服务写法

代码来自 Angular 官方文档，有删改

// 省略 @Injectable 代码
export class Logger {
  log(msg: any) {
    console.log(msg);
  }

  error(msg: any) {
    console.error(msg);
  }

  warn(msg: any) {
    console.warn(msg);
  }
}

在 ng 组件或是 service 的构造函数中注入服务（框架会帮我们自动完成）后即可在其他方法中调用。

// 省略 @Injectable 代码
export class HeroService {
  constructor(private logger: Logger) {}

  getHeroes() {
    this.getXXXXData().then((res: any) => {
      this.logger.log(`Fetched data: ${res}`);
    });
  }
}

原理简述

当 Angular 创建组件类的新实例时，框架会查看该组件类的 constructor，得到该组件依赖哪些服务或其它依赖项。

如果发现了某个组件依赖某个服务，框架会首先检查注入器中是否已经有了那个服务的实例。如果存在，直接返回；如果不存在，注入器就会使用以前注册的服务提供者来创造一个，并把它加入注入器中，最后把该服务返回。

提供服务

服务需要「提供」，才能使用。

1. 在服务中注册

@Injectable({
  providedIn: "root",
})
export class SomeService {}

默认情况下，服务会提供给 root，也就是根。这样该服务就可以在任何 module 的组件进行注入。

这种在 @Injectable 元数据中注册提供者的方式还让 Angular 能够通过移除那些从未被用过的服务来优化大小。

2. 在 module 中注册

@NgModule({
  providers: [
   AService,
   BService
 ],
 ...
})

你也可以提供给单独的 module，让 service 只能在该 module 使用。

3. 在组件中注册

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ SomeService ]
})

当你在组件级注册提供者时，你会为该组件的每一个新实例提供该服务的一个新实例！！！

所以不推荐这么做。

该在哪里注入服务

Angular 使得我们可以在任何的组件中注入服务，这会使得我们“滥用”注入。

这里我们借用一些 react-redux 中的概念——展示组件和容器组件。

在展示组件中，应该只负责定义自己需要的状态、方法，具体的依赖于外层传入。

在容器组件中，才可以注入服务进行操作。

这样能有效的降低组件对于特定服务的依赖。

（完）