Carane injeksi ketergantungan hierarkis Angular nganggo?

Question

Accepted Answer

Injeksi ketergantungan Angular iku **hierarkis**: injector mbentuk pohon sing nggambar pohon komponen/modul. Manawa komponen njaluk ketergantungan, Angular mlaku **munggah** ing pohon injector nganti nemokake provider — sing ngontrol apa sampeyan entuk singleton sing dipetakake utawa instans pisah kanggo saben 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 ``` Pandulu dimulai ing komponen sing njaluk lan mbubung menyang akar. **Pisanan** provider sing ditemokake menang. ## Ngendi sampeyan nyediake nentokake sakabehe ```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 {} ``` Iki tuas kunci: `providedIn: 'root'` menehi siji instans sing dipetakake; nyetarake provider ing larik `providers` komponen nggawe instans anyar sing duweni sakabehe ing subpohon komponen (migunani kanggo ngisolasi kaanan saben komponen). ## Pangubah 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 iki ngontrol *jauhe* Angular nggoleki pohon injector — contone `@Optional` nglangkungi salah nalika ketergantungan ilang, `@SkipSelf` pekso nggunakake instans induk. ## Token injeksi kanggo ketergantungan non-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 ngidini injeksi nilai/konfigurasi (ora mung kelas) lan nggantos implementasi (`useClass`, `useValue`, `useFactory`). ## Ngapa iku penting Paham injector hierarkis njlentrehake *kenapa* layanan dipetakake ing sakabehe app vs dumah kanggo saben komponen — sumber asaring saka kebingungan "kenapa komponen iki dipetakake/ora dipetakake kaanan?". Ngontrol sakabehe provider (`root` vs komponen `providers`), nggunakake pengubah (`@Optional`, `@SkipSelf`), lan token injeksi kanggo konfigurasi/implementasi sing bisa diganti iku sing ndadekake injeksi ketergantungan Angular kuat kanggo arsitektur lan pengujian.