В Angular компоненты являются основными строительными блоками. А при разработке компонентов Angular общая задача заключается в программном взаимодействии с элементами в шаблоне компонента. В этой статье вы узнаете, как выбирать элементы в шаблоне компонента Angular, используя связанный с ним класс TypeScript.

Основы: ссылочные переменные шаблона

Начнем с того, что Angular предоставляет способ ссылаться на элементы непосредственно в шаблоне, используя функцию, называемую ссылочными переменными шаблона. Это самый простой способ доступа к элементам DOM.

<input #myInput type="text">
<button (click)="logValue(myInput.value)">Log Value</button>

В приведенном выше примере #myInput — это ссылочная переменная шаблона. Это позволяет нам ссылаться на элемент <input> в другом месте шаблона, например, передавать его значение методу logValue().

ViewChild и ViewChildren

Для более продвинутых вариантов использования, особенно когда вам нужно взаимодействовать с шаблоном из вашего класса компонентов TypeScript, Angular предлагает декораторы @ViewChild и @ViewChildren.

Использование @ViewChild

@ViewChild предоставляет способ доступа к одному дочернему элементу в шаблоне из вашего класса компонентов. Он извлекает первый элемент, соответствующий предоставленному селектору.

Вот простой пример:

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

@Component({
  selector: 'app-sample',
  template: `
    <input #myInput type="text">
    <button (click)="logValue()">Log Value</button>
  `
})
export class SampleComponent implements AfterViewInit {
  @ViewChild('myInput') myInputRef: ElementRef;

  ngAfterViewInit() {
    // Access the native input element
    const nativeEl = this.myInputRef.nativeElement;
    nativeEl.focus();
  }

  logValue() {
    console.log(this.myInputRef.nativeElement.value);
  }
}

В этом примере декоратор @ViewChild предоставляет доступ к элементу <input> с помощью ссылочной переменной шаблона #myInput.

Использование @ViewChildren