Bagaimana cara kerja injeksi dependensi hierarki Angular?

Question

Accepted Answer

DI Angular **bersifat hierarki**: injector membentuk pohon yang mencerminkan pohon komponen/modul. Ketika komponen meminta dependensi, Angular berjalan **ke atas** pohon injector hingga menemukan provider — yang mengontrol apakah Anda mendapatkan singleton bersama atau instance terpisah per komponen. ## Hierarki injector ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Pencarian dimulai dari komponen yang meminta dan gelembung naik ke akar. Provider **pertama** yang ditemukan menang. ## Di mana Anda menyediakan menentukan cakupan ```ts // 1. App-wide singleton — ONE instance shared everywhere @Injectable({ providedIn: "root" }) export class AuthService {} // 2. Component-scoped — a NEW instance per component (and its children) @Component({ selector: "app-widget", providers: [DataService], // each gets its OWN DataService }) export class WidgetComponent {} ``` Ini adalah tuas kunci: `providedIn: 'root'` memberikan satu instance bersama; mendaftar provider dalam array `providers` komponen membuat instance baru yang dibatasi untuk subpohon komponen itu (berguna untuk mengisolasi status per komponen). ## Pengubah injeksi ```ts constructor( @Optional() private logger: Logger, // null instead of error if not provided @Self() private local: LocalService, // only look in THIS injector @SkipSelf() private parent: ParentService, // skip self, start at the parent @Host() private host: HostService, // stop at the host component ) {} ``` Dekorator ini mengontrol *sejauh mana* Angular mencari pohon injector — misalnya `@Optional` menghindari kesalahan ketika dependensi hilang, `@SkipSelf` memaksa menggunakan instance induk. ## Token injeksi untuk dependensi non-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 memungkinkan Anda untuk menyuntikkan nilai/konfigurasi (bukan hanya class) dan menukar implementasi (`useClass`, `useValue`, `useFactory`). ## Mengapa ini penting Memahami injector hierarki menjelaskan *mengapa* layanan dibagikan di seluruh aplikasi versus diduplikasi per komponen — sumber kebingungan yang sering terjadi "mengapa komponen ini berbagi/tidak berbagi status?". Mengontrol cakupan provider (`root` versus komponen `providers`), menggunakan pengubah (`@Optional`, `@SkipSelf`), dan token injeksi untuk konfigurasi/implementasi yang dapat ditukar adalah yang membuat DI Angular powerful untuk arsitektur dan pengujian.