Использование API DOM

Angular берет на себя большую часть создания, обновления и удаления DOM. Однако иногда вам может понадобиться напрямую взаимодействовать с DOM компонента. Компоненты могут внедрить ElementRef, чтобы получить ссылку на хост-элемент компонента:

@Component({
  /*...*/
})
export class ProfilePhoto {
  constructor() {
    const elementRef = inject(ElementRef);
    console.log(elementRef.nativeElement);
  }
}

Свойство nativeElement ссылается на экземпляр элемента хоста.

С помощью функций Angular afterEveryRender и afterNextRender можно зарегистрировать обратный вызов рендеринга, который выполняется после завершения рендеринга страницы в Angular.

@Component({
  /*...*/
})
export class ProfilePhoto {
  constructor() {
    const elementRef = inject(ElementRef);
    afterEveryRender(() => {
      // Focus the first input element in this component.
      elementRef.nativeElement.querySelector('input')?.focus();
    });
  }
}

Функции afterEveryRender и afterNextRender необходимо вызывать в контексте внедрения зависимостей, обычно в конструкторе компонента.

По возможности избегайте прямых манипуляций с DOM. Всегда предпочитайте описывать структуру DOM в шаблонах компонентов и обновлять DOM с помощью привязок.

Обратные вызовы рендеринга не выполняются при серверном рендеринге или предварительном рендеринге во время сборки.

Никогда не манипулируйте DOM напрямую внутри других хуков жизненного цикла Angular. Angular не гарантирует, что DOM компонента будет полностью отрендерен в какой-либо момент, кроме выполнения обратных вызовов рендеринга. Кроме того, чтение или изменение DOM во время выполнения других хуков жизненного цикла может негативно повлиять на производительность страницы, вызывая неоптимальную работу с макетом.

Использование средства рендеринга компонента

Компоненты могут внедрить экземпляр Renderer2 для выполнения некоторых манипуляций с DOM, связанных с другими возможностями Angular.

Все элементы DOM, созданные с помощью Renderer2 компонента, участвуют в инкапсуляции стилей этого компонента.

Некоторые API Renderer2 также связаны с системой анимации Angular. Метод setProperty можно использовать для обновления синтетических свойств анимации, а метод listen — для добавления прослушивателей событий синтетических событий анимации. Подробности см. в руководстве по анимациям.

За исключением этих двух узкоспециализированных случаев, между использованием Renderer2 и собственных API DOM нет разницы. API Renderer2 не поддерживают манипуляции с DOM в контексте серверного рендеринга или предварительного рендеринга во время сборки.

Когда использовать API DOM

Хотя Angular берет на себя большую часть задач рендеринга, для некоторых действий всё же может потребоваться использовать API DOM. Вот несколько распространенных случаев:

• Управление фокусом элемента
• Измерение геометрии элемента, например с помощью getBoundingClientRect
• Чтение текстового содержимого элемента
• Настройка встроенных наблюдателей, таких как MutationObserver, ResizeObserver или IntersectionObserver.

Избегайте вставки, удаления и изменения элементов DOM. В частности, никогда не задавайте напрямую свойство innerHTML элемента, так как это может сделать ваше приложение уязвимым для атак с межсайтовым скриптингом (XSS). Привязки шаблонов Angular, в том числе привязки для innerHTML, содержат средства защиты от атак XSS. Подробности см. в руководстве по безопасности.