服务与依赖注入

路线图「Services & DI」：Service 承载业务逻辑，依赖注入（DI） 由框架创建并注入实例。这是 Angular 与 React 核心（需 Context/第三方）的最大架构差异之一；概念接近 Vue 的 provide/inject，但 Angular 更系统化。

学习目标

• 创建 @Injectable 服务与 providedIn: 'root'
• 在组件中用 inject() 获取依赖
• 了解 NgRx / NGXS 在大型应用中的角色

核心概念

定义与注入

import { Injectable, inject } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";

export interface Track { slug: string; title: string; }

@Injectable({ providedIn: "root" })
export class TrackService {
  private http = inject(HttpClient);

  list(): Observable<Track[]> {
    return this.http.get<Track[]>("/api/tracks");
  }

  getBySlug(slug: string): Observable<Track> {
    return this.http.get<Track>(`/api/tracks/${slug}`);
  }
}

providedIn: 'root' → 应用级 单例，全组件共享。

组件消费

@Component({ /* ... */ })
export class TrackPageComponent implements OnInit {
  private trackService = inject(TrackService);
  tracks: Track[] = [];

  ngOnInit() {
    this.trackService.list().subscribe((data) => (this.tracks = data));
  }
}

与 React/Next 对照

Angular	React	Next.js
@Injectable + DI	Context / 模块单例	Server 模块 / fetch 封装
inject(TrackService)	useContext / 自定义 hook	import 服务端函数
NgRx	Redux / Zustand	同 React + 服务端状态

路线图「State Management」节点：小应用 Service 足够；大 B 端可选 NgRx（类似 Redux 单向数据流）。

练习

• ng generate service track 并实现 list()
• 组件用 inject() 替换直接 fetch

小结

Service 承载逻辑，DI 解耦组件与依赖。 下一课 HttpClient。