Angular ਦਾ hierarchical dependency injection ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ?

Question

Accepted Answer

Angular ਦਾ DI **hierarchical** ਹੈ: injectors ਇੱਕ ਰੁੱਖ ਬਣਾਉਂਦੇ ਹਨ ਜੋ component/module ਰੁੱਖ ਨੂੰ ਪ੍ਰਤੀਬਿੰਬਿਤ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਇੱਕ component ਇੱਕ dependency ਲਈ ਬੇਨਤੀ ਕਰਦਾ ਹੈ, Angular **ਉੱਪਰ** ਦੀ ਤਰਫ injector ਰੁੱਖ ਵਿੱਚ ਚੱਲਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਇਹ ਇੱਕ provider ਨੂੰ ਲੱਭ ਨਹੀਂ ਲੈਂਦਾ — ਜੋ ਕਿ ਨਿਯੰਤ੍ਰਿਤ ਕਰਦਾ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਇੱਕ ਸਾਂਝਾ singleton ਮਿਲਦਾ ਹੈ ਜਾਂ ਪ੍ਰਤੀ component ਇੱਕ ਵੱਖਰੀ instance। ## Injector ਦੀ hierarchy ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` ਇੱਕ lookup ਬੇਨਤੀ ਕਰਨ ਵਾਲੇ component ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ ਅਤੇ root ਤੱਕ ਉੱਪਰ ਜਾਂਦੀ ਹੈ। **ਪਹਿਲਾ** ਲੱਭਿਆ ਹੋਇਆ provider ਜਿੱਤਦਾ ਹੈ। ## ਤੁਸੀਂ ਕਿੱਥੇ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋ ਸਕੋਪ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ```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 {} ``` ਇਹ ਮੁੱਖ ਲਿਵਰ ਹੈ: `providedIn: 'root'` ਇੱਕ ਸਿੰਗਲ ਸਾਂਝੀ instance ਦਿੰਦਾ ਹੈ; ਇੱਕ component ਦੇ `providers` array ਵਿੱਚ ਇੱਕ provider ਦੀ ਸੂਚੀ ਉਸ component subtree ਲਈ ਸਕੋਪ ਕੀਤੀ ਇੱਕ ਤਾਜ਼ੀ instance ਬਣਾਉਂਦੀ ਹੈ (ਪ੍ਰਤੀ component state ਨੂੰ ਅਲਗ ਕਰਨ ਲਈ ਉਪਯੋਗੀ)। ## Injection modifiers ```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 ) {} ``` ਇਹ decorators ਨਿਯੰਤ੍ਰਿਤ ਕਰਦੇ ਹਨ *ਕਿੱਥੇ ਤੱਕ* Angular injector ਰੁੱਖ ਨੂੰ ਖੋਜਦਾ ਹੈ — ਜਿਵੇਂ `@Optional` ਜਦੋਂ ਕੋਈ dependency ਗੁੰਮ ਹੋ ਤਾਂ ਇੱਕ ਗਲਤੀ ਤੋਂ ਬਚਦਾ ਹੈ, `@SkipSelf` ਇੱਕ parent ਦੀ instance ਦਾ ਵਰਤੋਂ ਕਰਨ ਨੂੰ ਮਜਬੂਰ ਕਰਦਾ ਹੈ। ## Non-class dependencies ਲਈ Injection tokens ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Tokens ਤੁਹਾਨੂੰ values/config (ਸਿਰਫ classes ਨਹੀਂ) inject ਕਰਨ ਦਿੰਦੇ ਹਨ ਅਤੇ implementations ਨੂੰ ਬਦਲਦੇ ਹਨ (`useClass`, `useValue`, `useFactory`)। ## ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ Hierarchical injector ਨੂੰ ਸਮਝਦਾ ਹੋਇਆ ਇਹ ਦੱਸਦਾ ਹੈ *ਕਿਉਂ* ਇੱਕ service ਐਪ-ਵਾਈਡ ਸਾਂਝੀ ਹੈ ਬਨਾਮ ਪ੍ਰਤੀ component ਡੁਪਲਿਕੇਟ ਹੈ — "ਇਹ components ਕਿਉਂ state ਸਾਂਝਾ/ਸਾਂਝਾ ਨਹੀਂ ਕਰਦੇ?" ਗਲਤ ਸਮਝਣਾ ਦਾ ਇੱਕ ਆਮ ਸਰੋਤ। Provider scope ਨੂੰ ਨਿਯੰਤ੍ਰਿਤ ਕਰਨਾ (`root` vs component `providers`), modifiers (`@Optional`, `@SkipSelf`) ਦਾ ਵਰਤੋਂ ਕਰਨਾ, ਅਤੇ config/swappable implementations ਲਈ injection tokens ਹੀ ਉਹ ਹਨ ਜੋ Angular ਦੇ DI ਨੂੰ ਆਰਕੀਟੈਕਚਰ ਅਤੇ testing ਦੋਵਾਂ ਲਈ ਸ਼ਕਤੀਸ਼ਾਲੀ ਬਣਾਉਂਦੇ ਹਨ।