红宝书第四十二讲：Angular核心特性精讲：依赖注入 & RxJS整合

红宝书第四十二讲：Angular核心特性精讲：依赖注入 & RxJS整合

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

---

一、依赖注入（Dependency Injection）：快递员送货到家的服务

1. 核心概念：按需取货

• 传统的对象创建方式：手动造零件（自己new Service()）
• 依赖注入：告诉系统"我需要什么"，Angular自动送货上门（类似外卖点单）¹

2. 操作流程图解

flowchart TD
    A[服务声明] -->|@Injectable装饰器| B(服务池)
    C[组件需要服务] -->|构造函数定义| D{Angular检查服务池}
    D -->|存在| E[自动注入实例]
    D -->|不存在| F[按层级向上查找]

3. 实战例子：日志服务

① 定义服务（快递仓库）：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // 📦 全域快递站
})
export class LoggerService {
  log(message: string) {
    console.log(`📝 ${new Date().toLocaleString()}: ${message}`);
  }
}

② 使用服务（收快递）：

@Component({
  selector: 'app-user',
  template: `<button (click)="addUser()">添加用户</button>`
})
export class UserComponent {
  // ✨ 构造函数直接"点单"
  constructor(private logger: LoggerService) {}

  addUser() {
    this.logger.log('用户添加成功'); // 控制台自动记录带时间戳的日志
  }
}

---

二、RxJS整合：响应式编程像水管工布管

1. Observable的妙用

• 传统请求：拨打一次电话 → 收到一次回应
• Observable：建立数据管道 → 持续接收推送（如实时聊天）²

2. 实战场景：用户搜索自动补全

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-search',
  template: `<input [formControl]="searchInput">`
})
export class SearchComponent {
  searchInput = new FormControl('');

  constructor(private apiService: ApiService) {
    this.searchInput.valueChanges
      .pipe(
        debounceTime(300), // 🕒 防抖：停止输入300ms后才触发
        switchMap(keyword => this.apiService.search(keyword)) // 🔄 切换最新请求
      )
      .subscribe(results => {
        console.log('收到搜索结果:', results);
      });
  }
}

代码运行效果：

输入"ang" → 暂停300ms → 自动发送请求 → 显示结果
输入"angu" → 自动取消前一次未完成的请求 → 发送新请求

---

3. 核心操作流程图

flowchart LR
    A[用户输入事件] --> B[valueChanges流]
    B -->|防抖处理| C{有效输入}
    C -->|switchMap| D[HTTP请求]
    D --> E[UI更新结果]
    输入过快 --> F[自动取消旧请求]

---

三、两者协作优势总结

技术	解决的问题	典型协作场景
依赖注入	服务实例管理	HttpClient通过DI注入到组件使用
RxJS	异步流程复杂管理	HTTP请求转Observable + DI服务处理	12

---

补充知识：核心类库的关系

引用材料显示：Angular内置RxJS库用于处理异步流程²³

示例：内置HttpClient用法

import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {
  constructor(private http: HttpClient) {} // 💉 DI注入HttpClient

  fetchUsers() {
    return this.http.get('/api/users') // 返回Observable对象
      .pipe(
        retry(2) // 🔄 失败自动重试2次
      );
  }
}

---

目录：总目录
上篇文章：红宝书第四十一讲：关于Vue3的入门解读和与Vue2的区别

下篇文章：红宝书第四十三讲：基于资料的数据可视化工具简单介绍：D3.js 与 Canvas绘图

---

1. 《JavaScript高级程序设计（第5版）》Angular框架的核心架构基于组件化和依赖注入系统 ↩
2. 《JavaScript高级程序设计（第5版）》RxJS库提供Observable模式用于管理异步数据流 ↩
3. 《JavaScript高级程序设计（第5版）》Angular官方文档推荐结合RxJS处理复杂异步场景 ↩