Что такое Lifecycle Hooks в Angular и какие из них используются?

Что проверяют

Знаете ли вы, в какой момент компонент готов к работе. За вопросом стоит практика: запрос за данными, обращение к элементам шаблона и отписка живут в разных хуках, и путаница здесь даёт либо пустые поля при первом рендере, либо утечки. Слабый ответ это список названий, сильный это порядок вызова и объяснение, почему выбран именно этот хук.

Как отвечать

Хуки это методы, которые Angular вызывает в фиксированные моменты жизни компонента или директивы. Порядок такой:

ngOnChanges -> ngOnInit -> ngDoCheck ->
ngAfterContentInit -> ngAfterContentChecked ->
ngAfterViewInit -> ngAfterViewChecked -> ngOnDestroy

ngOnChanges вызывается только при наличии входных свойств и получает объект изменений; первый вызов проходит до ngOnInit. ngOnInit срабатывает один раз, когда входы уже заполнены: сюда идёт начальная загрузка данных. ngDoCheck и хуки с окончанием Checked дергаются на каждом цикле обнаружения изменений, то есть постоянно. ngAfterViewInit это первый момент, когда доступны элементы шаблона и дочерние компоненты. ngOnDestroy снимает подписки, таймеры и слушатели.

Хук объявляют вместе с интерфейсом, например implements OnInit: тогда опечатка в имени метода станет ошибкой компиляции, а не тихо не сработает.

Где спотыкаются

Ставят ngOnInit самым первым и уверяют, что ngOnChanges только про последующие изменения. Из-за этого в ngOnInit ждут данных, которые на самом деле уже пришли, либо дублируют инициализацию сразу в двух хуках.

Лезут к элементам шаблона в ngOnInit и получают пустую ссылку: представление ещё не построено. Обратная ошибка это правка отображаемых данных в ngAfterViewInit, после которой в режиме разработки прилетает ошибка про выражение, изменённое после проверки.

Забывают ngOnDestroy. Подписка на поток, интервал или слушатель события переживают компонент, и после нескольких переходов по маршрутам один и тот же обработчик работает в нескольких экземплярах сразу.