---
title: "服务"
date: "2026-04"
category: "Angular"
tags: ["Angular"]
description: "Angular 的这个 Service 看上去用法跟 Hook 是很像的。不过它们最大的差别就是：React 里的 Hook 只能在组件里面共享状态..."
source: "https://enriquemark.com/zh-hans/posts/%E6%9C%8D%E5%8B%99"
---

Angular 的这个 Service 看上去用法跟 Hook 是很像的。不过它们最大的差别就是：React 里的 Hook 只能在组件里面共享状态，但是 Angular 这边的 Service 是全局共享的。

不过它们的设计逻辑还是差不多的：
1. 把一些非 UI 渲染相关的复用逻辑（或者干脆是所有逻辑）都扔到 Service 里面来。
2. 只要不是跟 UI 渲染有关的内容。组件里面当然就只写 UI 。

然后另一个差别就是，使用前要先 inject 一下，先注入才能用。

这里可以重点再提一下`inject`，原先angular的语法是把各种要引入的外部函数放到构造函数里给入，但现在直接`inject`就可以搞定一切了。

```ts
// 旧写法
constructor(private fb: FormBuilder) {}
// 新写法
private fb = inject(FormBuilder);
```