Angular Advanced DI
Angular-ல் மேம்பட்ட சார்பு உட்செலுத்தல் மென்மையான கட்டமைப்புகளை உருவாக்க படிநிலை injectors, தனிப்பட்ட InjectionToken, விருப்பமான மற்றும் பல வழங்குநர்கள் மற்றும் செயல்பாடு-பாணி inject() முறையைப் பயன்படுத்துகிறது.
சார்பு உட்செலுத்தல் என்பது Angular-ன் மைய வடிவமைப்பு முறைகளில் ஒன்றாகும், இது கூறுகள் தங்கள் சார்புகளை வெளிப்படையாகக் கோர அனுமதிக்கிறது, இது கட்டமைப்பை சுருக்குகிறது மற்றும் சோதனை செய்வதை எளிதாக்குகிறது.
Advanced DI Essentials
வரம்பு: படிநிலை injectors என்பது பயன்பாடு/பாதை/கூறு நிலைகளில் உள்ள வழங்குநர்கள் நிகழ்வுகள் எங்கு வாழ்கின்றன என்பதை வரையறுக்கின்றன.
டோக்கன்கள்: வகுப்பு அல்லாத மதிப்புகள் மற்றும் கட்டமைப்பிற்கு InjectionToken பயன்படுத்தவும்.
செயல்பாடு inject: உருவாக்கிகளில் அல்லது பயன்பாட்டு செயல்பாடுகளில் inject() பயன்படுத்தவும்.
விருப்பமான & பல: விருப்பமான சார்புகள் மற்றும் பல வழங்குநர்கள் மென்மையான கலவையை செயல்படுத்துகின்றன.
Advanced DI Setup
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 },
]
});குறியீடு விளக்கம்:
InjectionToken: வகுப்பு அல்லாத மதிப்புகள் மற்றும் கட்டமைப்பிற்கான ஒரு வகைப்படுத்தப்பட்ட டோக்கனை வரையறுக்கிறது.
inject(TOKEN, { optional: true }): ஒரு சார்பை மீட்டெடுக்கிறது மற்றும் காணாமல் போகும்போது null/undefined வழங்குகிறது.
multi: true: ஒரே டோக்கனுக்கு பல வழங்குநர் மதிப்புகளை ஒரு வரிசையில் சேகரிக்கிறது.
Jassif Team குறிப்புகள்:
சேவைகள் & DI, ரவுட்டர், மற்றும் பயன்பாடு பூட்ஸ்ட்ராப் பற்றி காண்க.
கட்டமைப்பிற்கு InjectionToken பயன்படுத்தவும், பயன்பாட்டு செயல்பாடுகளில் செயல்பாடு-பாணி inject() பயன்படுத்தவும், மற்றும் முடிந்தவரை பாதைகள்/கூறுகளுக்கு வழங்குநர்களை நோக்குநிலைப்படுத்தவும்.
முக்கியமானது: Angular-ன் DI அமைப்பு பயன்பாடுகளை மிகவும் மாடுலர் மற்றும் சோதனை செய்யக்கூடியதாக ஆக்குகிறது.
Advanced DI Example
Multi Providers Example
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 }
]
});எடுத்துக்காட்டு விளக்கம்:
FEATURES token: வழங்குநர்களால் பங்களிக்கப்பட்ட சரங்களை தொகுக்கும் பல வழங்குநர் டோக்கன்.
inject(FEATURES): ரன்டைமில் தொகுக்கப்பட்ட வரிசையைப் படிக்கிறது.
Display: டெம்ப்ளேட் அம்சங்களை காற்புள்ளி பிரிக்கப்பட்ட பட்டியலில் இணைக்கிறது.
சிறந்த நடைமுறைகள்:
வகைகளை விட டோக்கன்கள்: வகுப்புகளுக்கு அல்ல, மதிப்புகள் மற்றும் இடைமுகங்களுக்கு InjectionToken பயன்படுத்தவும்.
பல வழங்குநர்கள்: ஒரு டோக்கனின் கீழ் பல பங்களிப்புகளை சேகரிக்க multi: true சேர்க்கவும்.
வரம்பு வழங்குநர்கள்: தனிமைப்படுத்துதல் தேவைப்படும்போது root-க்கு பதிலாக பாதைகள்/கூறுகளில் வழங்க பயன்படுத்தவும்.
மையப்படுத்தப்பட்ட கட்டமைப்பு: பயன்பாட்டு-அகலமான அமைப்புகளை InjectionToken-கள் மூலம் மேலாண்மை செய்யவும்.
Optional and Multi Providers
ஒரு சார்பு தேவையில்லாதபோது @Optional() அல்லது inject(TOKEN, { optional: true }) பயன்படுத்தவும்.
பல வழங்குநர்கள் பல மதிப்புகள் ஒரே டோக்கனுக்கு பங்களிக்க அனுமதிக்கின்றன.
Optional DI Setup
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 });Complete Example
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 },
]
});எடுத்துக்காட்டு விளக்கம்:
Optional inject: inject(USER_NAME, { optional: true }) வழங்கப்படும் போது ஒரு மதிப்பை வழங்குகிறது அல்லது இல்லாதபோது null/undefined வழங்குகிறது.
பல வழங்குநர்கள்: பல FEATURES உள்ளீடுகள் ஒரு வரிசையில் இணைக்கப்படுகின்றன.
இயல்புநிலைகள்: விருப்பமான மதிப்புகள் காணாமல் போகும்போது டெம்ப்ளேட் இயல்புநிலைகளைக் காட்டுகிறது.
DI Patterns Comparison
| முறை | பயன் கூறு | செயலாக்கம் |
|---|---|---|
| InjectionToken | கட்டமைப்பு மதிப்புகள், வகுப்பு அல்லாத சார்புகள் | new InjectionToken('TOKEN_NAME') |
| Optional Dependencies | கிடைக்காத அம்சங்கள் | inject(TOKEN, {optional: true}) or @Optional() |
| Multi Providers | பல பங்களிப்புகளை சேகரித்தல் | {provide: TOKEN, useValue: X, multi: true} |
| Hierarchical Injectors | பாதை/கூறுக்கு ஸ்கோப் செய்யப்பட்ட சேவைகள் | providers array in component/route |
| Function inject() | பயன்பாட்டு செயல்பாடுகள், அமைப்பு செயல்பாடுகள் | const service = inject(Service) |
| Factory Providers | சிக்கலான உருவாக்க தர்க்கம் | {provide: TOKEN, useFactory: () => new Service()} |
DI முறைகள் பயன்பாடு:
Angular-ன் மேம்பட்ட DI அம்சங்கள் நெகிழ்வான மற்றும் பராமரிக்கக்கூடிய பயன்பாடுகளை உருவாக்க உதவுகின்றன:
- InjectionToken: வகுப்புகளுடன் கட்டுப்படுத்தப்படாத மதிப்புகளுக்கு பயன்படுத்தவும்
- Optional DI: பயன்பாடுகள் தேவையில்லாத அம்சங்களுக்கு
- Multi Providers: பயன்பாட்டு விரிவாக்கத்திற்கு சிறந்தது
- Hierarchical DI: தனிமைப்படுத்தப்பட்ட சூழல்களுக்கு