Angular kengaytirilgan DI

Murakkab DI moslashuvchan konfiguratsiyalarni yaratish uchun ierarxik injektorlar, maxsus InjectionToken, ixtiyoriy va ko‘p provayderlar va funksiya uslubidagi inject() dan foydalanadi.

Kengaytirilgan DI Essentials

Qo‘llanish doirasi: Ierarxik injektorlar ilova/marshrut/component darajasidagi provayderlar misollar yashaydigan joyni belgilaydi.
Tokenlar: InjectionTokendan classdan tashqari qiymatlar va konfiguratsiyalar uchun foydalaning.
Funksiya inject: konstruktorlar yoki yordamchi funksiyalarda inject() dan foydalaning.
Majburiy emas va ko‘p: ixtiyoriy bog‘liqliklar va ko‘p provayderlar moslashuvchan kompozitsiyani faollashtiradi.

import { InjectionToken, inject, 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 },
  ]
});

Kod tushuntirildi

InjectionToken: Class bo‘lmagan qiymatlar va konfiguratsiya uchun yozilgan tokenni belgilaydi.
inject(TOKEN, {ixtiyoriy: true }): Bog‘liqlikni oladi va yetishmayotganda null / undefined qaytaradi.
multi: true: bir xil token uchun bir nechta provayder qiymatlarini massivga to‘playdi.

Eslatmalar:

Aloqador: Xizmatlar va DI, Router va App Bootstrap-ga qarang.
Konfiguratsiya uchun InjectionToken dan foydalaning, yordamchi dasturlarda funksiya uslubidagi inject() dan foydalaning va iloji bo‘lsa, yo‘nalishlar/componentlar uchun provayderlarni qamrab oling.

Kengaytirilgan DI misoli

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, InjectionToken, 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 }
  ]
});

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

XUSUSIYATLAR tokeni: Provayderlar tomonidan kiritilgan stringlarni jamlovchi ko‘p provayder tokeni.
inject(XUSUSIYATLAR): Ish vaqtida jamlangan massivni o‘qiydi.
Displey: Shablon xususiyatlarni vergul bilan ajratilgan ro‘yxatga birlashtiradi.

Eslatmalar:

Turlar bo‘yicha tokenlar: InjectionTokendan classlar uchun emas, balki qiymatlar va interfeyslar uchun foydalaning.
Ko‘p provayderlar: Bitta token ostida ko‘plab hissalarni to‘plash uchun multi: true qo‘shing.
Scope provayderlari: Izolyatsiya kerak bo‘lganda root o‘rniga marshrutlarda/komponentlarda ta’minlashdan foydalaning.

Ixtiyoriy va ko‘p provayderlar

Agar qaramlik talab qilinmasa, @Optional() yoki inject(TOKEN, { optional: true }) dan foydalaning.
Ko‘p provayderlar bir xil tokenga bir nechta qiymatlarni qo‘shishga imkon beradi.

import { InjectionToken, inject, 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 });

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, InjectionToken, 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 },
  ]
});

<app-root></app-root>

Misol tushuntirildi

Ixtiyoriy in’ektsiya: inject(USER_NAME, { optional: true }) berilganda qiymatni qaytaradi yoki yo‘q bo‘lganda null/undefined.
Ko‘p provayderlar: Bir nechta FEATURES yozuvlar massivga birlashtirilgan.
Orqaga qaytishlar: ixtiyoriy qiymatlar yo‘q bo‘lganda shablon standart sozlamalarni ko‘rsatadi.

Eslatmalar:

Ixtiyoriy deps: Agar qaramlik ixtiyoriy bo‘lsa, har doim nullni ishlating.
To‘qnashuvlardan saqlaning: xususiyatlar bo‘ylab tasodifiy qayta foydalanishning oldini olish uchun tokenlarni aniq nomlang.
Konfiguratsiya namunasi: global sozlamalarni tokenlar bilan modellashtiring va kerak bo‘lganda har bir marshrut/komponentni bekor qiling.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish