---
title: "服務"
date: "2026-04"
category: "Angular"
tags: ["Angular"]
description: "Angular 的這個 Service 看上去用法跟 Hook 是很像的。不過它們最大的差別就是：React 裡的 Hook 只能在元件裡面共享狀態..."
source: "https://enriquemark.com/zh-hant/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);
```