Что такое ContentChild?

Что такое ContentChild?

ContentChild — это декоратор и механизм запроса в Angular, предназначенный для получения доступа к дочерним элементам содержимого (content children), которые передаются в компонент через <ng-content> (англ. content projection). В отличие от ViewChild, который работает с элементами внутри шаблона компонента, ContentChild обращается к контенту, спроецированному извне — тому, что находится между открывающим и закрывающим тегами компонента в родительском шаблоне.

Ключевые аспекты ContentChild

1. Назначение и контекст использования

• Используется для взаимодействия с проецируемым контентом (например, дочерними компонентами, директивами или DOM-элементами, которые передаются в <ng-content>).
• Типичные сценарии:

     * Получение ссылки на спроецированный компонент/директиву для вызова его методов.
     * Доступ к свойствам или состоянию проецированного элемента.
     * Реализация сложных компонентов с динамическим содержимым (аккордеоны, вкладки, модальные окна).

2. Синтаксис и использование Декоратор применяется к свойству класса компонента и принимает селектор (имя класса директивы/компонента, строку шаблонной переменной или тип). Пример:

import { Component, ContentChild, AfterContentInit } from '@angular/core';
import { ProjectedComponent } from './projected.component';

@Component({
  selector: 'app-container',
  template: `
    <div>
      <ng-content></ng-content> <!-- Сюда проецируется контент -->
    </div>
  `
})
export class ContainerComponent implements AfterContentInit {
  @ContentChild(ProjectedComponent) projectedChild: ProjectedComponent;
  // Или через строковую ссылку: @ContentChild('myRef') elementRef: ElementRef;

  ngAfterContentInit() {
    // Здесь projectedChild уже доступен
    console.log(this.projectedChild); // Объект ProjectedComponent
  }
}

3. Жизненный цикл и хук AfterContentInit

• ContentChild становится доступным после инициализации контента — на этапе жизненного цикла ngAfterContentInit.
• Попытка доступа раньше (например, в ngOnInit) вернёт undefined, так как Angular ещё не обработал проецируемый контент.

4. Варианты запросов ContentChild

• Запрос по типу: @ContentChild(MyDirective) — ищет экземпляр директивы/компонента.
• Запрос по строке: @ContentChild('templateRef') — ищет элемент с локальной переменной #templateRef.
• Запрос с опциями (static):

     - `static: true` — запрашивает элемент **до детекта изменений** (статический контент). Доступен в `ngOnInit`.
     - `static: false` (по умолчанию) — элемент запрашивается **после детекта изменений** (динамический контент). Доступен в `ngAfterContentInit`.

// Пример с static: true
@ContentChild('staticRef', { static: true }) staticChild: ElementRef;

ngOnInit() {
  console.log(this.staticChild); // Работает, если контент статический
}

5. Отличие от ViewChild и ContentChildren

• ViewChild запрашивает элементы внутри шаблона текущего компонента (не проецируемые).
• ContentChildren (@ContentChildren) возвращает QueryList нескольких проецируемых элементов, а ContentChild — только первый из них.
• ContentChild поддерживает динамические изменения: если контент изменится (например, через ngIf), Angular обновит ссылку.

Практический пример

Рассмотрим компонент TabPanel, который проецирует контент и управляет им:

// tab-panel.component.ts
import { Component, ContentChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-tab-panel',
  template: `
    <div class="tab-header">{{ title }}</div>
    <div class="tab-body">
      <ng-content></ng-content> <!-- Проецируемый контент -->
    </div>
  `
})
export class TabPanelComponent {
  @ContentChild('tabContent') customTemplate: TemplateRef<any>;
  title = 'Вкладка';
}

<!-- Родительский компонент -->
<app-tab-panel>
  <!-- Этот контент проецируется в TabPanelComponent -->
  <ng-template #tabContent>
    <p>Динамическое содержимое вкладки!</p>
  </ng-template>
</app-tab-panel>

Важные нюансы

• Статический vs динамический контент: Если контент зависит от условных директив (*ngIf, *ngFor), используйте static: false (по умолчанию).
• Изменения во времени: Для отслеживания изменений в QueryList (при использовании ContentChildren) можно подписаться на changes.
• Производительность: Чрезмерное использование ContentChild в сочетании с динамическим контентом может повлиять на производительность из0за частых проверок изменений.

Вывод

ContentChild — это мощный инструмент Angular для работы со спроецированным контентом, позволяющий создавать гибкие и переиспользуемые компоненты. Он является частью системы запросов к представлению (view queries) и играет ключевую роль в реализации компонентов со сложной структурой, таких как навигационные панели, списки, модальные окна. Понимание разницы между ContentChild, ViewChild и этапами жизненного цикла (особенно ngAfterContentInit) критически важно для эффективной Angular-разработки.