Bagaimanakah pensuntikan kebergantungan hierarki Angular berfungsi?

Question

Accepted Answer

DI Angular ialah **berhierarki**: penyuntik membentuk pohon yang mencerminkan pohon komponen/modul. Apabila sebuah komponen meminta kebergantungan, Angular berjalan **ke atas** pohon penyuntik sehingga menemukan penyedia — yang mengawal sama ada anda mendapatkan singleton yang dikongsi atau instans berasingan bagi setiap komponen. ## Hierarki penyuntik ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Pencarian bermula pada komponen yang meminta dan berkembung ke akar. Penyedia **pertama** yang ditemui menang. ## Di mana anda menyediakan menentukan skop ```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 tuil utama: `providedIn: 'root'` memberikan satu instans yang dikongsi; menyenaraikan penyedia dalam larik `providers` komponen mencipta instans baru yang berskop kepada subpohon komponen itu (berguna untuk mengasingkan keadaan setiap komponen). ## Pengubah pensuntikan ```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 mengawal *sejauh mana* Angular mencari pohon penyuntik — cth. `@Optional` mengelak ralat apabila kebergantungan tiada, `@SkipSelf` memaksa menggunakan instans induk. ## Token pensuntikan untuk kebergantungan bukan-kelas ```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 membenarkan anda menyuntik nilai/konfigurasi (bukan hanya kelas) dan menukar pelaksanaan (`useClass`, `useValue`, `useFactory`). ## Mengapa ini penting Memahami penyuntik berhierarki menjelaskan *mengapa* perkhidmatan dikongsi seluruh apl vs diduplikasi setiap komponen — sumber kekeliruan yang kerap "mengapa komponen ini berkongsi/tidak berkongsi keadaan?". Mengawal skop penyedia (`root` vs komponen `providers`), menggunakan pengubah (`@Optional`, `@SkipSelf`), dan token pensuntikan untuk konfigurasi/pelaksanaan yang boleh ditukar adalah apa yang menjadikan DI Angular berkuasa untuk seni bina dan pengujian.