تزریق وابستگی پیشرفته (Advanced DI)

«DI پیشرفته انگولار» یعنی تزریق هوشمند وابستگی ها. این یعنی ساخت و مدیریت سرویس ها طبق محدوده ها. همچنین با «توکن تزریق (InjectionToken)» مقدارهای غیرکلاسی را می دهیم. سپس با «inject()» آنها را می خوانیم. در نهایت، اختیار بیشتری با «اختیاری (Optional)» و «چندگانه (Multi)» داریم.

مبانی DI پیشرفته

درخت انژکتورها محدوده ها را تعیین می کند. بنابراین سرویس ها می توانند در اپ، روتر، یا کامپوننت ساخته شوند. سپس با «توکن تزریق» پیکربندی را تایپ دار می کنیم. همچنین با «inject()» در هر تابع دسترسی می گیریم.

import { InjectionToken } from '@angular/core';
import { inject } from '@angular/core';
import { Optional } from '@angular/core';

// Tokens
export const CONFIG = new InjectionToken<{ api: string }>('CONFIG');
export const FEATURES = new InjectionToken<string[]>('FEATURES');

// Optional inject
const cfg = inject(CONFIG, { optional: true });

// Multi providers
bootstrapApplication(App, {
  providers: [
    { provide: CONFIG, useValue: { api: '/api' } },
    { provide: FEATURES, useValue: 'search', multi: true },
    { provide: FEATURES, useValue: 'share', multi: true },
  ],
});

مشاهده در ادیتور

مثال: Multi Providers

چند مقدار زیر یک توکن می ریزیم. سپس آرایه نهایی را با inject() می خوانیم. این برای قابلیت های افزایشی عالی است.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { InjectionToken } from '@angular/core';
import { inject } from '@angular/core';

const FEATURES = new InjectionToken<string[]>('FEATURES');

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>DI: Multi Providers</h3>
    <p>Features: {{ features.join(', ') }}</p>
  `,
})
class App {
  features = inject(FEATURES);
}

bootstrapApplication(App, {
  providers: [
    { provide: FEATURES, useValue: 'search', multi: true },
    { provide: FEATURES, useValue: 'share', multi: true },
    { provide: FEATURES, useValue: 'ai', multi: true },
  ],
});

مشاهده در ادیتور

وابستگی اختیاری و چندگانه

گاهی وابستگی لازم نیست. بنابراین با «@Optional()» یا گزینه «optional» خطا نمی گیریم. سپس مقدار جایگزین نشان می دهیم.

import { InjectionToken } from '@angular/core';
import { inject } from '@angular/core';
import { Optional } from '@angular/core';

export const USER_NAME = new InjectionToken<string>('USER_NAME');

// Constructor optional
constructor(@Optional() public maybeName?: string) {}

// Function optional
const name = inject(USER_NAME, { optional: true });

مشاهده در ادیتور

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { InjectionToken } from '@angular/core';
import { inject } from '@angular/core';

const USER_NAME = new InjectionToken<string>('USER_NAME');
const FEATURES = new InjectionToken<string[]>('FEATURES');

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Optional & Multi</h3>
    <p>Hello: {{ name || 'Anonymous' }}</p>
    <p>Features: {{ features?.join(', ') || '∅' }}</p>
  `,
})
class App {
  name = inject(USER_NAME, { optional: true });
  features = inject(FEATURES, { optional: true });
}

bootstrapApplication(App, {
  providers: [
    // Try commenting USER_NAME to see optional behavior
    { provide: USER_NAME, useValue: 'Dana' },
    { provide: FEATURES, useValue: 'search', multi: true },
    { provide: FEATURES, useValue: 'share', multi: true },
  ],
});

مشاهده در ادیتور

گام های عملی

1. توکن ها را بساز و نوع بده.
2. در محدوده درست، provider ثبت کن.
3. با inject مقدار را بردار.
4. برای مقادیر متعدد، multi را فعال کن.
5. برای نبود مقدار، optional را هندل کن.

نکته: نام توکن ها را شفاف بنویس. بنابراین تداخل کمتر می شود.

جمع بندی سریع

• DI پیشرفته انگولار = انعطاف بالا.
• InjectionToken برای مقادیر غیرکلاسی است.
• inject() دسترسی ساده و سریع می دهد.
• multi آرایه می سازد و ترکیب می کند.
• optional خطای نبود وابستگی را می گیرد.

صفحات مرتبط: کامپوننت های پویا، DI پیشرفته انگولار، و کنترل جریان.