Как получить доступ к элементу DOM в шаблоне Angular компонента?

Использование ViewChild и шаблонных переменных

В Angular правильный способ доступа к DOM-элементу в шаблоне — это использование шаблонных переменных (template reference variables) в сочетании с декоратором @ViewChild. Этот подход является идиоматичным для Angular и следует принципу работы с виртуальным DOM через абстракции.

Решение вашей проблемы

Вот как нужно переписать ваш компонент, используя правильный подход:

// my-component.ts
import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-my',
  template: `
    <p #myParagraph>Начальный текст</p>
    <button (click)="changeText()">Изменить текст</button>
  `,
  styleUrls: ['./my-component.css']
})
export class MyComponent {
  // Объявляем ссылку на элемент с шаблонной переменной #myParagraph
  @ViewChild('myParagraph') paragraphRef!: ElementRef;

  changeText() {
    // Доступ к нативному элементу через nativeElement
    const paragraph = this.paragraphRef.nativeElement;
    
    paragraph.innerText = 'Новый текст';
    paragraph.classList.add('highlight');
  }
}

Пошаговое объяснение

1. Шаблонная переменная (#myParagraph) — это ссылка на элемент прямо в HTML-шаблоне. Она создаёт локальную переменную, которую можно использовать в этом же шаблоне, но для доступа из кода компонента нужен @ViewChild.
2. Декоратор @ViewChild('myParagraph') — связывает шаблонную переменную со свойством класса paragraphRef. Angular автоматически найдёт элемент с такой переменной и присвоит его свойству.
3. Тип ElementRef — это обёртка Angular вокруг нативного DOM-элемента. Свойство nativeElement даёт доступ к реальному HTML-элементу.
4. Оператор ! (non-null assertion) — указывает TypeScript, что значение будет установлено (Angular гарантирует это к моменту использования).

Важные моменты

• @ViewChild доступен только после инициализации представления (после ngAfterViewInit). В конструкторе или ngOnInit он будет undefined.
• Если вы используете *ngIf или другие структурные директивы, элемент может не существовать в DOM в момент вызова. В таких случаях используйте сеттер @ViewChild с геттером.
• Для доступа к нескольким элементам используйте @ViewChildren с QueryList.

Лучшая практика: работа через Renderer2

Для изменения стилей и текста в Angular рекомендуется использовать Renderer2 вместо прямого доступа к nativeElement. Это делает код более безопасным и платформонезависимым:

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-my',
  template: `
    <p #myParagraph>Начальный текст</p>
    <button (click)="changeText()">Изменить текст</button>
  `
})
export class MyComponent {
  @ViewChild('myParagraph') paragraphRef!: ElementRef;

  constructor(private renderer: Renderer2) {}

  changeText() {
    const paragraph = this.paragraphRef.nativeElement;
    this.renderer.setProperty(paragraph, 'innerText', 'Новый текст');
    this.renderer.addClass(paragraph, 'highlight');
  }
}

Теперь ваш код будет работать корректно, и вы следуете лучшим практикам Angular!

// my-component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my',
  template: `
    <p [class.highlight]="isHighlighted">{{ paragraphText }}</p>
    <button (click)="toggleHighlight()">Изменить</button>
  `
})
export class MyComponent {
  paragraphText = 'Начальный текст';
  isHighlighted = false;

  toggleHighlight() {
    this.paragraphText = 'Новый текст';
    this.isHighlighted = true;
  }
}