Dependency injection phân cấp của Angular hoạt động như thế nào?

Question

Accepted Answer

DI của Angular là **phân cấp (hierarchical)**: các injector tạo thành một cây phản ánh cây component/module. Khi một component yêu cầu một phụ thuộc, Angular đi **lên** cây injector cho tới khi tìm thấy một provider — điều này quyết định bạn nhận được một singleton dùng chung hay một instance riêng cho mỗi component. ## Hệ phân cấp injector ```text Root injector (toàn ứng dụng) ← providedIn: 'root' nằm ở đây (một singleton) └─ Injector của Module/Route └─ Injector của Component ← providers: [...] trong @Component └─ Injector của component con ``` Một lần tra cứu bắt đầu từ component yêu cầu và lan ngược lên root. Provider **đầu tiên** được tìm thấy sẽ thắng. ## Nơi bạn provide quyết định phạm vi ```ts // 1. Singleton toàn ứng dụng — MỘT instance được chia sẻ ở mọi nơi @Injectable({ providedIn: "root" }) export class AuthService {} // 2. Scope theo component — một instance MỚI cho mỗi component (và các con của nó) @Component({ selector: "app-widget", providers: [DataService], // mỗi nhận một DataService RIÊNG }) export class WidgetComponent {} ``` Đây là đòn bẩy then chốt: `providedIn: 'root'` cho một instance chia sẻ duy nhất; liệt kê một provider trong mảng `providers` của một component tạo ra một instance mới được scope vào cây con của component đó (hữu ích để cô lập state theo từng component). ## Các modifier của injection ```ts constructor( @Optional() private logger: Logger, // null thay vì lỗi nếu không được provide @Self() private local: LocalService, // chỉ tìm trong injector NÀY @SkipSelf() private parent: ParentService, // bỏ qua chính nó, bắt đầu từ cha @Host() private host: HostService, // dừng ở component host ) {} ``` Các decorator này kiểm soát Angular tìm kiếm *xa tới đâu* trên cây injector — ví dụ `@Optional` tránh lỗi khi thiếu một phụ thuộc, `@SkipSelf` buộc dùng instance của cha. ## Injection token cho các phụ thuộc không phải class ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Token cho phép bạn inject các giá trị/cấu hình (không chỉ class) và tráo cách triển khai (`useClass`, `useValue`, `useFactory`). ## Tại sao điều này quan trọng Hiểu injector phân cấp giải thích *vì sao* một service được chia sẻ toàn ứng dụng hay bị nhân bản theo từng component — một nguồn nhầm lẫn thường gặp kiểu "vì sao các component này chia sẻ/không chia sẻ state?". Kiểm soát phạm vi provider (`root` so với `providers` của component), dùng các modifier (`@Optional`, `@SkipSelf`), và injection token cho cấu hình/triển khai có thể tráo đổi là điều khiến DI của Angular mạnh mẽ cho cả kiến trúc lẫn testing.