Angular-da inject() vəya Constructor: Hansından İstifadə Etməlisiniz?

Angular 14 versiyasında inject() funksiyası təqdim olundu və o vaxtdan bəri developerlər arasında “Constructor ilə inject() arasındakı fərq nədir?” sualı aktuallaşdı.

Bu məqalədə hər iki yanaşmanı dərin şəkildə analiz edəcəyik, hansı hallarda hansının daha faydalı olduğunu birlikdə öyrənəcəyik və real kod nümunələri ilə müqayisə aparacağıq.

Dependency Injection (DI) nədir?

Angular-da Dependency Injection (DI), komponentlərə və servislərə lazımı obyektləri avtomatik ötürən mexanizmdir. Əvvəlcə bu DI constructor vasitəsilə işləyirdi, amma indi inject() funksiyasını da istifadə edə bilərik.

Servislərin inject edilməsi (constructor ilə):

export class CountComponent {  constructor(private apiService: ApiService) {}}

Amma eyni funksiyanı inject() ilə bu formada yaza bilərik:

export class CountComponent {  private apiService = inject(ApiService);}

Bəs bu iki yanaşmanın real fərqi nədir və hansı daha yaxşıdır?

1. Constructor ilə inject() arasında əsas fərqlər

İlk baxışda inject() sadəcə constructor-ın alternativi kimi görünə bilər, amma əsas fərqləri aşağıdakı kimidir:

Press enter or click to view image in full size

2. Miras Alanda (Inheritance) inject() Daha Rahatdır

Əgər bir komponent və ya servis başqa bir sinifdən miras alırsa, inject() ilə constructor çağırmaq məcburidir.

Məsələn, constructor ilə:

export class BaseComponent {  constructor(protected apiService: ApiService) {}  getUser(endpoint: string): Observable<User[]> {    return this.apiService.getUser(endpoint);  }}export class UserComponent extends BaseComponent {  userData$: Observable<User[]>;  constructor(apiService: ApiService) {    super(apiService);    // super() çağırmaq lazımdır  }  getUserList() {    this.userData$ = this.getUser('/users');  }}

inject() ilə:

export class BaseComponent {  protected apiService = inject(ApiService);  getUser(endpoint: string): Observable<User[]> {    return this.apiService.getUser(endpoint);  }}export class UserComponent extends BaseComponent {  // super() çağırılmır  userData$: Observable<User[]>;  getUserList() {    this.userData$ = this.getUser('/users');  }}

Bu kod nümunələrindən göründüyü kimi super() çağırmaq lazım deyil və kod daha təmiz görünür.

3. Standalone Komponentlər və Direktivlər Üçün inject() Daha Uyğundur

Angular 14-dən sonra standalone komponentlər və direktivlər təqdim olundu və inject() burada daha çox üstünlük qazandı.

Standalone komponentdə inject() istifadə etmək rahatdır:

import { Component, inject } from '@angular/core';import { ApiService } from './api.service';@Component({  selector: 'app-some',  templateUrl: './some.component.html',  standalone: true})export class UserComponent {  private userService = inject(UserService);  ngOnInit() {    this.userService.getUserList();  }}

Burada constructor olmadan da servis inject() ilə istifadə olunur və kod daha moduldur.

4. Functional programming və Composable API-lər üçün inject() Daha Uyğundur

Ən böyük üstünlüklərdən biri inject()-in funksiya əsaslı yanaşmalar üçün işləməsidir.

Məsələn, Angular effect() və computed() kimi funksiyaları tətbiq etdikdə inject() çox rahat oldu:

import { inject, effect } from '@angular/core';import { ApiService } from './api.service';import { User } from './user.model'; const apiService = inject(ApiService);effect(() => {  apiService.getUserList().subscribe((users: User[]) => {    console.log(users);  });});

Burada constructor olmadan DI işləyir və kod daha modul olur.

5. Unit Test Yazarkən inject() İstifadəsi

Angular unit testlərində constructor-dan birbaşa istifadə etmək mümkün deyil, çünki test mühitində TestBed konfiqurasiyası lazımdır.

Testlərdə TestBed.inject() istifadə olunur:

import { TestBed } from '@angular/core/testing';import { ApiService } from './api.service';describe('ApiService', () => {  let service: ApiService;  beforeEach(() => {    TestBed.configureTestingModule({      providers: [ApiService],    });    service = TestBed.inject(ApiService);  });  it('should be created', () => {    expect(service).toBeTruthy();  });})

Burada inject() istifadəsi daha uyğun olur, çünki constructor istifadə edilə bilmir.

 

inject()-in Dezavantajları

Baxmayaraq ki, inject() çox faydalıdır, amm bəzi məhdudiyyətlər də var:

1. Yalnız Angular DI konteyneri daxilində işləyir.

• Normal JavaScript siniflərində və ya Angular olmayan mühitlərdə istifadə edilə bilməz.

Bu isə inject()-in yalnız Angular çərçivəsində işlədiyini və digər mühitlərdə tətbiq olunmadığını göstərir.

2. Componentlərdə daha az açıq şəkildə görünür.

• Constructor olmadığı üçün servisin necə inject edildiyini oxumaq bir müddət sonra çətinləşir.

Bu isə böyük komanda ilə işləyərkən, kodun oxunmasında problem yarada bilər.

3. Komponentin yüklənməsi ilə əlaqəli əməliyyatlar üçün inject() istifadə edilə bilməz.

• Əgər komponent yüklənməzdən əvvəl müəyyən əməliyyatları yerinə yetirmək istəyirsinizsə (məsələn, servisin başlanğıc vəziyyətini qurmaq və ya asinxron əməliyyatlar), bu mümkün olmur.

Bu vəziyyətdə constructor daha uyğun ola bilər, çünki constructor komponentin qurulması ilə birgə işləyir.

Əgər sistem böyükdürsə və komanda üzvlərinin kodu oxuması vacibdirsə, constructor hələ də bəzi hallarda daha üstün ola bilər.

Hər İkisinin Dezavantajları və Avantajları

Press enter or click to view image in full size

Əgər klassik Angular komponentlər yazırsansa və miras almırsansa, constructor istifadə edə bilərsən.

Əgər standalone komponentlər, funksiya əsaslı yanaşmalar və ya mirasdan istifadə edirsənsə, inject() daha yaxşı seçimdir.