> Для чего используются Content hooks (ContentInit, ContentChecked) в Angular (Angular)

Короткий ответ

Content hooks (ngAfterContentInit и ngAfterContentChecked) в Angular предназначены для работы с проекцией контента (<ng-content>). Они вызываются после того, как внешний контент был спроецирован внутрь компонента. ngAfterContentInit срабатывает один раз после первой проекции, а ngAfterContentChecked - при каждой проверке изменений спроецированного контента. Эти хуки позволяют реагировать на изменения контента, переданного из родительского компонента.

Подробное объяснение

Content hooks являются частью lifecycle hooks Angular и специфичны для работы с проекцией контента. Они отличаются от View hooks (ngAfterViewInit, ngAfterViewChecked), которые работают с шаблоном самого компонента.

• ngAfterContentInit: вызывается один раз после того, как Angular впервые спроецировал внешний контент через <ng-content>. Это происходит после инициализации дочерних компонентов, но до вызова ngAfterViewInit родителя.
• ngAfterContentChecked: вызывается после каждой проверки изменений спроецированного контента. Это может происходить многократно, например, при каждом change detection cycle.

Content hooks полезны, когда компонент должен реагировать на контент, переданный извне, например, для доступа к ContentChild или ContentChildren декораторам. Они также используются в библиотеках компонентов (например, Angular Material) для управления проекцией сложных структур.

Важно: в ngAfterContentInit и ngAfterContentChecked спроецированный контент уже доступен, но шаблон самого компонента (view) ещё может быть не инициализирован. Поэтому попытка доступа к view children здесь может привести к ошибке.

На практике

Content hooks часто применяются в:

• Компонентах-контейнерах, которые принимают произвольный контент (например, модальные окна, табы, карточки).
• Библиотеках UI для управления состоянием проекции.
• Сценариях, где нужно подписаться на изменения спроецированных данных или выполнить дополнительные проверки.

Типичный use case - компонент табов, где контент каждой вкладки проецируется через <ng-content>, и нужно отслеживать, какие вкладки активны или изменились.

Пример кода

TYPESCRIPT
import { Component, ContentChild, AfterContentInit, AfterContentChecked, ElementRef } from '@angular/core';

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <div class="card-header">
        <ng-content select="[card-title]"></ng-content>
      </div>
      <div class="card-body">
        <ng-content select="[card-body]"></ng-content>
      </div>
    </div>
  `
})
export class CardComponent implements AfterContentInit, AfterContentChecked {
  @ContentChild('cardTitle') titleElement!: ElementRef;

  ngAfterContentInit(): void {
    console.log('Content initialized:', this.titleElement.nativeElement.textContent);
    // Здесь можно выполнить начальную настройку на основе спроецированного контента
  }

  ngAfterContentChecked(): void {
    console.log('Content checked:', this.titleElement?.nativeElement.textContent);
    // Реагируем на изменения контента
  }
}

Использование в родительском компоненте:

HTML
<app-card>
  <span card-title #cardTitle>Заголовок карточки</span>
  <div card-body>Основной контент</div>
</app-card>

Как отвечать на собеседовании

Начни с краткого определения: Content hooks - это lifecycle hooks для работы с проекцией контента. Затем объясни разницу между ngAfterContentInit и ngAfterContentChecked: первый вызывается один раз после первой проекции, второй - при каждом change detection. Упомяни, что они используются для доступа к ContentChild/ContentChildren и реагирования на изменения внешнего контента. Подчеркни, что эти хуки вызываются до View hooks, что важно для порядка выполнения. Приведи пример из практики, например, компонент табов или карточки. Избегай излишних деталей о внутреннем устройстве Angular, если не спрашивают.

Что проверяет интервьюер

Интервьюер оценивает:

• Понимание lifecycle hooks Angular и их порядка выполнения.
• Знание разницы между Content hooks и View hooks.
• Умение применять Content hooks в реальных сценариях (проекция контента, библиотеки компонентов).
• Способность объяснить, когда и почему использовать ngAfterContentInit vs ngAfterContentChecked.
• Понимание ограничений: доступ к view children внутри Content hooks невозможен.

Типичные ошибки

• Путаница между Content hooks и View hooks: попытка использовать ngAfterContentInit для доступа к view children.
• Игнорирование того, что ngAfterContentChecked вызывается часто и может привести к проблемам с производительностью, если внутри выполнять тяжёлые операции.
• Непонимание, что Content hooks работают только с контентом, переданным через <ng-content>, а не с обычными inputs.
• Забывание, что ngAfterContentInit вызывается только один раз, и попытка подписаться на изменения контента только в нём - для этого нужен ngAfterContentChecked.