服务与依赖注入

Angular 依赖注入（DI） 是框架核心：业务逻辑放在 Service，组件通过构造函数或 inject() 获取实例。对比 React 核心 需自行 Context/第三方库，Vue 3 核心 的 provide/inject 概念相近但 Angular DI 更系统化。

学习目标

• 创建 @Injectable 服务
• 使用 inject() 与 providedIn: 'root'
• 理解单例作用域与测试替换

核心内容

定义服务

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);
  private base = "/api/tracks";

  list(): Observable<Track[]> {
    return this.http.get<Track[]>(this.base);
  }

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

providedIn: 'root' 表示应用级 单例，全组件共享同一实例。

组件注入

@Component({
  selector: "app-track-page",
  standalone: true,
  template: `<ul>@for (t of tracks; track t.slug) { <li>{{ t.title }}</li> }</ul>`,
})
export class TrackPageComponent implements OnInit {
  private trackService = inject(TrackService);
  tracks: Track[] = [];

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

也可写 constructor(private trackService: TrackService) {}。Service 放 API 与权限逻辑，与 Spring Boot 分层一致；类型见 TypeScript 核心。

练习

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

小结

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