La DI en pratique

Ce guide explore d'autres fonctionnalités de l'injection de dépendances (DI) dans Angular.

Injecter l'élément DOM du composant

Bien que les développeurs l'évitent généralement, certains effets visuels et outils tiers vous obligent à accéder directement au DOM. Dans ces cas, vous pouvez avoir besoin d'accéder à l'élément DOM d'un composant.

Angular expose l'élément DOM sous-jacent d'un @Component ou d'une @Directive par injection, grâce au jeton ElementRef :

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

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

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

Injecter le nom de balise du host element

Pour obtenir le nom de balise d'un host element, injectez-le avec le jeton HOST_TAG_NAME.

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':
        // Handle button action
        break;
      case 'a':
        // Handle anchor action
        break;
      default:
        // Handle other elements
        break;
    }
  }
}

Résoudre les dépendances circulaires avec une référence anticipée

En TypeScript, l'ordre des déclarations de classes compte. Vous ne pouvez pas faire directement référence à une classe tant que vous ne l'avez pas définie.

Ce n'est généralement pas un problème, surtout si vous respectez la règle recommandée d'une classe par fichier. Cependant, dans certains cas, les références circulaires sont inévitables. Par exemple, si la classe 'A' fait référence à la classe 'B' et que la classe 'B' fait référence à la classe 'A', l'une d'elles doit être définie en premier.

La fonction Angular forwardRef() crée une référence indirecte qu'Angular peut résoudre plus tard.

Vous rencontrez un problème similaire quand une classe fait référence à elle-même. Par exemple, dans son tableau providers. Le tableau providers est une propriété de la fonction décorateur @Component(), qui doit apparaître avant la définition de la classe. Ces références circulaires peuvent être résolues avec forwardRef.

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