> В каком порядке вызываются хуки в родительских и дочерних компонентах Angular (Angular)

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

В Angular хуки жизненного цикла вызываются в порядке: сначала у родительского компонента ngOnChanges, затем ngOnInit, потом ngDoCheck. После этого вызываются хуки дочерних компонентов в том же порядке. После завершения всех дочерних хуков родитель вызывает ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked. Этот порядок гарантирует, что родитель завершает свою инициализацию до проверки содержимого и представления.

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

Порядок вызова хуков жизненного цикла в Angular строго регламентирован и следует иерархии компонентов. Основные правила:

1. Инициализация - сначала вызываются хуки родительского компонента в последовательности: ngOnChanges (при наличии входных свойств), ngOnInit, ngDoCheck. Затем Angular рекурсивно проходит по всем дочерним компонентам, вызывая у каждого те же хуки в том же порядке.

2. Проверка содержимого - после завершения инициализации всех дочерних компонентов родитель вызывает ngAfterContentInit и ngAfterContentChecked. Это связано с проекцией содержимого через <ng-content>.

3. Проверка представления - затем Angular снова проходит по дочерним компонентам, вызывая у них ngAfterViewInit и ngAfterViewChecked. После завершения всех дочерних проверок представления родитель вызывает свои ngAfterViewInit и ngAfterViewChecked.

Этот механизм гарантирует, что:

• Дочерние компоненты полностью инициализированы до того, как родитель начнёт проверять своё содержимое.
• Представления дочерних компонентов готовы до проверки представления родителя.

Для компонента без дочерних элементов порядок упрощается: ngOnChanges → ngOnInit → ngDoCheck → ngAfterContentInit → ngAfterContentChecked → ngAfterViewInit → ngAfterViewChecked.

На практике

При разработке сложных компонентов важно учитывать этот порядок для избежания race conditions и ошибок доступа к данным. Например:

• Инициализация данных - используйте ngOnInit для загрузки данных, так как он вызывается после установки входных свойств (@Input). Не полагайтесь на ngOnChanges для начальной инициализации, так как он может не вызваться, если входные свойства не изменяются.

• Работа с дочерними компонентами - доступ к дочерним компонентам через @ViewChild или @ViewChildren возможен только после ngAfterViewInit родителя. Аналогично, доступ к проекции через @ContentChild - после ngAfterContentInit.

• Оптимизация производительности - избегайте тяжёлых операций в ngDoCheck и ngAfterViewChecked, так как они вызываются при каждом цикле обнаружения изменений. Используйте ChangeDetectionStrategy.OnPush для уменьшения количества проверок.

• Порядок при динамическом создании - при использовании ComponentFactoryResolver или структурных директив (*ngIf, *ngFor) хуки вызываются в момент добавления/удаления компонента в DOM, сохраняя иерархический порядок.

Пример кода

TYPESCRIPT
@Component({
  selector: 'app-parent',
  template: '<app-child [data]="value"></app-child>'
})
export class ParentComponent implements OnInit, AfterViewInit {
  value = 'initial';

  ngOnInit() { console.log('Parent ngOnInit'); }
  ngAfterViewInit() { console.log('Parent AfterViewInit'); }
}

@Component({
  selector: 'app-child',
  template: '<p>{{ data }}</p>'
})
export class ChildComponent implements OnInit, AfterViewInit {
  @Input() data: string;

  ngOnInit() { console.log('Child ngOnInit'); }
  ngAfterViewInit() { console.log('Child AfterViewInit'); }
}

// Порядок вывода:
// Parent ngOnInit
// Child ngOnInit
// Child AfterViewInit
// Parent AfterViewInit

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

Начните с краткого описания порядка: сначала родительские хуки инициализации, затем дочерние, потом проверка содержимого родителя, затем дочерние проверки представления, и наконец родительские проверки представления. Подчеркните, что это гарантирует предсказуемость и избегает состояния гонки. Приведите пример, когда знание порядка критично - например, доступ к @ViewChild только после ngAfterViewInit. Если спросят про ngDoCheck - объясните, что он вызывается при каждом цикле обнаружения изменений и может быть использован для кастомной проверки, но с осторожностью из-за производительности.

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

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

• Понимание жизненного цикла Angular и его иерархической природы.
• Умение применять знания на практике - например, когда использовать ngAfterViewInit вместо ngOnInit.
• Осведомлённость о потенциальных проблемах, таких как доступ к дочерним элементам до их инициализации.
• Глубину знаний - может спросить про ngDoCheck или ChangeDetectionStrategy.

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

• Утверждение, что все хуки вызываются сначала у родителя, потом у всех дочерних - на самом деле порядок смешанный.
• Попытка доступа к @ViewChild в ngOnInit - это приведёт к undefined, так как представление ещё не готово.
• Игнорирование ngAfterContentInit при работе с проекцией - может вызвать ошибки доступа к контенту.
• Предположение, что ngOnChanges вызывается всегда - он вызывается только при наличии @Input свойств и их изменении.