DI uygulamada

Bu kılavuz, Angular'da bağımlılık enjeksiyonunun (DI) ek özelliklerini inceler.

Bileşenin DOM elemanını enjekte etme

Geliştiriciler genellikle bundan kaçınsa da, bazı görsel efektler ve üçüncü taraf araçlar DOM'a doğrudan erişmenizi gerektirir. Bu gibi durumlarda, bir bileşenin DOM elemanına erişmeniz gerekebilir.

Angular, ElementRef token'ını kullanarak bir @Component veya @Directive'in temel DOM elemanını enjeksiyon yoluyla sunar:

import {Directive, ElementRef, inject} from '@angular/core';

@Directive({
  selector: '[appHighlight]',
})
export class HighlightDirective {
  private element = inject(ElementRef);

  update() {
    this.element.nativeElement.style.color = 'red';
  }
}

Ana elemanın etiket adını enjekte etme

Bir ana elemanın etiket adını almak için, HOST_TAG_NAME token'ını kullanarak enjekte edin.

import {Directive, HOST_TAG_NAME, inject} from '@angular/core';

@Directive({
  selector: '[roleButton]',
})
export class RoleButtonDirective {
  private tagName = inject(HOST_TAG_NAME);

  onAction() {
    switch (this.tagName) {
      case 'button':
        // Buton eylemini işle
        break;
      case 'a':
        // Bağlantı eylemini işle
        break;
      default:
        // Diğer elemanları işle
        break;
    }
  }
}

İleri referans ile döngüsel bağımlılıkları çözme

TypeScript'te sınıf bildirimlerinin sırası önemlidir. Bir sınıfı tanımlamadan önce doğrudan ona referans veremezsiniz.

Bu genellikle bir sorun değildir, özellikle önerilen dosya başına bir sınıf kuralına uyarsanız. Ancak bazı durumlarda döngüsel referanslar kaçınılmazdır. Örneğin, 'A' sınıfı 'B' sınıfına ve 'B' sınıfı da 'A' sınıfına referans verdiğinde, birinin önce tanımlanması gerekir.

Angular forwardRef() fonksiyonu, Angular'ın daha sonra çözebileceği dolaylı bir referans oluşturur.

Bir sınıfın kendisine referans vermesi gerektiğinde benzer bir sorunla karşılaşırsınız. Örneğin, providers dizisinde. providers dizisi, sınıf tanımından önce görünmesi gereken @Component() dekoratör fonksiyonunun bir özelliğidir. Bu tür döngüsel referanslar forwardRef kullanılarak çözülebilir.

providers: [
  {
    provide: PARENT_MENU_ITEM,
    useExisting: forwardRef(() => MenuItem),
  },
],