Senior Angular Frontend — вопросы на собеседовании Angular

Объясните change detection. Чем OnPush отличается от Default?

Change detection обходит дерево компонентов после событий, таймеров или HTTP-ответов и перерисовывает изменившиеся привязки. Default проверяет каждый компонент на каждом цикле. OnPush проверяет компонент только когда изменилась ссылка во входном свойстве, внутри произошло событие или async pipe выдал значение — поэтому OnPush требует иммутабельных данных: изменение объекта на месте не меняет ссылку, и представление не обновится.

Что такое map, switchMap и mergeMap? В чём разница?

map преобразует каждое пришедшее значение. switchMap и mergeMap разворачивают вложенный observable: switchMap отменяет предыдущую внутреннюю подписку при приходе нового значения, mergeMap выполняет все параллельно. switchMap берут для поиска или навигации, где важен только последний результат, mergeMap — когда каждый запрос обязан завершиться, а concatMap — когда важен порядок.

Что такое ngOnInit и чем он отличается от конструктора?

Конструктор выполняется при создании экземпляра класса, до того как Angular заполнил входные привязки, поэтому там входные свойства ещё undefined. ngOnInit выполняется после первого прохода привязок, и именно туда относится инициализация, зависящая от входов. По соглашению конструктор только принимает внедрённые зависимости, а реальную подготовку делает ngOnInit.

В чём разница между template-driven и reactive формами?

Template-driven формы строят модель неявно из директив в шаблоне и подходят для простых случаев. Reactive формы описывают FormGroup в классе компонента, благодаря чему валидация, динамические контролы и тестирование становятся явными и типобезопасными. Reactive рекомендуют по умолчанию для всего сложнее формы логина, потому что состояние формы живёт в коде, где о нём можно рассуждать.

Как избежать утечек памяти при работе с Observable?

Подписка, которую не закрыли, удерживает свой колбэк и захваченную область видимости живыми и после уничтожения компонента. Самое чистое решение — async pipe, который подписывается и отписывается сам. Иначе применяют takeUntilDestroyed либо собирают подписки и отписываются в ngOnDestroy — типичная промашка это долгоживущий поток вроде событий роутера или вебсокета.

Что такое pipe? Как создать свой?

Pipe преобразует значение для отображения в шаблоне, удерживая форматирование вне класса компонента. Свой создаётся декоратором @Pipe и методом transform. По умолчанию pipe чистый, то есть Angular пересчитывает его только при смене ссылки на вход, и это делает его дешёвым — пометка pipe как impure заставляет выполнять его на каждом цикле change detection и должна быть крайней мерой.