Что такое ViewChild

Ответ

ViewChild — это декоратор в Angular, который позволяет получить доступ к дочернему компоненту, директиве или DOM-элементу из родительского компонента.

Пример:

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

@Component({
  selector: 'app-parent',
  template: `
    <div #myDiv>Some content</div>
    <app-child></app-child>
  `
})
export class ParentComponent {
  @ViewChild('myDiv') divRef: ElementRef;
  @ViewChild(ChildComponent) child: ChildComponent;

  ngAfterViewInit() {
    console.log(this.divRef.nativeElement.textContent); // Доступ к DOM
    this.child.someMethod(); // Вызов метода дочернего компонента
  }
}

Особенности:

  • Работает только после ngAfterViewInit.
  • Можно использовать с шаблонными переменными (#myDiv) или классами компонентов/директив.
  • Для нескольких элементов используется @ViewChildren.