DI на практике

Это руководство рассказывает о дополнительных возможностях внедрения зависимостей (DI) в Angular.

Внедрение DOM-элемента компонента

Хотя разработчики обычно стараются этого избегать, для некоторых визуальных эффектов и сторонних инструментов требуется прямой доступ к DOM. В таких случаях может понадобиться доступ к DOM-элементу компонента.

Angular предоставляет доступ к базовому DOM-элементу @Component или @Directive с помощью внедрения токена 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';
  }
}

Внедрение имени тега элемента-хоста

Чтобы получить имя тега элемента-хоста, внедрите его с помощью токена 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;
    }
  }
}

Разрешение циклических зависимостей с помощью предварительной ссылки

В TypeScript важен порядок объявлений классов. Нельзя напрямую ссылаться на класс, пока он не объявлен.

Обычно это не проблема, особенно если вы следуете рекомендуемому правилу один класс на файл. Однако в некоторых случаях циклических ссылок не избежать. Например, если класс 'A' ссылается на класс 'B', а класс 'B' — на класс 'A', один из них необходимо объявить первым.

Функция Angular forwardRef() создаёт косвенную ссылку, которую Angular может разрешить позже.

Похожая проблема возникает, когда класс ссылается на самого себя. Например, в его массиве providers. Массив providers — это свойство функции-декоратора @Component(), которая должна находиться перед определением класса. Такие циклические ссылки можно разрешить с помощью forwardRef.

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