Angular 2 @ViewChild возвращает undefined — как правильно получить доступ к дочернему компоненту?

Основная причина проблемы: @ViewChild доступен только после инициализации представления

Ваша проблема связана с жизненным циклом Angular. Декоратор @ViewChild предоставляет доступ к дочернему компоненту или элементу DOM, но он недоступен в конструкторе родительского компонента или на этапе ngOnInit. Он заполняется только после того, как Angular завершит инициализацию представления (view). Это происходит в хуке ngAfterViewInit.

В вашем примере вы используете @ViewChild(ChildComponent) childComponent!: ChildComponent;. Оператор ! (non-null assertion) говорит TypeScript, что переменная будет инициализирована позже, но это не гарантирует, что Angular уже создал экземпляр дочернего компонента. Если вы попытаетесь обратиться к childComponent до вызова ngAfterViewInit, вы получите undefined.

Хотя вы вызываете метод по клику (что обычно происходит после загрузки страницы), важно убедиться, что сам метод callChildMethod не вызывается раньше, чем Angular завершит рендеринг. Например, если вы вызываете этот метод из ngOnInit или из родительского конструктора, проблема проявится.

Решение 1: Использовать хук ngAfterViewInit

Самый правильный способ — убедиться, что доступ к @ViewChild происходит только после инициализации представления. Используйте интерфейс AfterViewInit и реализуйте метод ngAfterViewInit:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <app-child></app-child>
      <button (click)="callChildMethod()">Вызвать метод дочернего компонента</button>
    </div>
  `
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) childComponent!: ChildComponent;

  ngAfterViewInit() {
    // Здесь childComponent уже доступен
    console.log('Child component initialized:', this.childComponent);
  }

  callChildMethod() {
    if (this.childComponent) {
      this.childComponent.doSomething();
    } else {
      console.log('childComponent is undefined — возможно, шаблон еще не загружен');
    }
  }
}

Решение 2: Использовать сеттер для @ViewChild

Более продвинутый подход — использовать декоратор @ViewChild с сеттером. Это позволяет выполнить код сразу, как только дочерний компонент станет доступен:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <app-child></app-child>
      <button (click)="callChildMethod()">Вызвать метод дочернего компонента</button>
    </div>
  `
})
export class ParentComponent {
  private _childComponent!: ChildComponent;

  @ViewChild(ChildComponent) set childComponent(value: ChildComponent) {
    this._childComponent = value;
    console.log('Child component set:', value);
  }

  get childComponent(): ChildComponent {
    return this._childComponent;
  }

  callChildMethod() {
    if (this.childComponent) {
      this.childComponent.doSomething();
    }
  }
}

Решение 3: Проверить использование *ngIf

Если дочерний компонент скрыт с помощью *ngIf, то @ViewChild может возвращать undefined, пока условие ложно. В этом случае используйте @ViewChild с { static: false } (по умолчанию) и убедитесь, что компонент существует в DOM на момент обращения:

@ViewChild(ChildComponent, { static: false }) childComponent!: ChildComponent;

Также проверьте, что селектор app-child действительно соответствует вашему дочернему компоненту, и что он не обернут в дополнительные условные директивы типа ngSwitch или ngTemplateOutlet.

Дополнительная рекомендация

• Не используйте @ViewChild в конструкторе или ngOnInit — там он всегда будет undefined.
• Для элементов DOM (например, @ViewChild('myDiv')) правила те же — доступ только после ngAfterViewInit.
• Если вы используете Angular 8+, обратите внимание на параметр static. По умолчанию static: false, что означает, что запрос происходит после изменений. Для статичных элементов (которые не зависят от *ngIf) можно использовать static: true, чтобы получить доступ раньше, но это редко нужно.

// В шаблоне родительского компонента
<app-child #childRef></app-child>

// В классе
@ViewChild('childRef') childComponent!: ChildComponent;