❓ Вопрос

Как в архитектуре data flow Angular организовать передачу закешированных данных между компонентами без дополнительного запроса к серверу?

✅ Ответ

Для передачи закешированных данных между компонентами в архитектуре data flow Angular следует использовать сервисы с BehaviorSubject или ReplaySubject, которые хранят текущее состояние данных и обеспечивают их реактивную передачу. Данные в сервисе запрашиваются один раз и сохраняются, что позволяет избежать дополнительных запросов к серверу при переходе между компонентами. Компоненты подписываются на эти observable, получая актуальные данные из кеша и автоматически обновляясь при изменениях.

#lexicon #собеседование #angular #junior

#quiz #lexicon #собеседование #angular #senior

📘 Разбор опроса

Обработка ошибок в NgRx Effects: catchError

Вопрос: Что произойдёт, если в эффекте не обработать ошибку через catchError, а сервер вернёт 500?

✅ Правильный ответ: Ошибка пробросится в глобальный обработчик Angular, эффект 'умрёт', подписка отпишется

1) Идея вопроса: Проверить понимание критичности обработки ошибок в NgRx Effects и поведения Observable потоков при необработанных исключениях. Вопрос сфокусирован на последствиях пропуска catchError в pipe эффекта. 2) Почему правильный вариант верный: Второй вариант корректен. Когда Observable в эффекте выбрасывает ошибку без перехвата catchError, поток завершается с ошибкой. NgRx Effects автоматически отписывается от этого потока (эффект 'умирает'), и ошибка всплывает в глобальный обработчик Angular ErrorHandler, если её не перехватить раньше. Состояние через dispatch не изменится, так как поток завершён. 3) Почему остальные варианты неверные: Первый вариант неверен: хотя эффект завершится, ключевая ошибка в утверждении 'подписка автоматически отпишется'. В NgRx Effects подписка управляется фреймворком, и при ошибке без catchError она действительно отпишется, но это описывается как 'эффект умирает', а не просто 'завершается'. Также важно, что ошибка не останется незамеченной - она попадёт в ErrorHandler. Третий вариант полностью ошибочен: NgRx не выполняет автоматический dispatch action при ошибке. Это ответственность разработчика - явно обработать ошибку в catchError и задиспатчить соответствующий action. Без этого никакие actions не будут отправлены. 4) Где ловушка: Ловушка в первом варианте, который выглядит правдоподобно для новичка. Он частично верен (эффект завершится, состояние не изменится), но содержит критическую неточность про автоматическую отписку и умалчивает о пробросе ошибки в ErrorHandler. Также ловушка в том, что некоторые могут подумать, будто NgRx имеет встроенную автоматическую обработку ошибок. 5) Практический вывод: Всегда обрабатывайте ошибки в Effects с помощью catchError, возвращая новый Observable (часто с action ошибки). Игнорирование catchError приводит к 'смерти' эффекта - он перестаёт реагировать на последующие actions. Это нарушает работу функциональности. Глобальный ErrorHandler - последняя линия защиты, но он не восстанавливает работу эффекта. Правильная практика: в catchError диспатчить action failure, который обработается в редьюсере, а сам эффект должен возвращать action или EMPTY, чтобы поток не завершался с ошибкой.

❓ Вопрос

Как браузер управляет памятью при работе с DOM, и какие приемы используются для оптимизации производительности при манипуляциях с DOM-деревом?

✅ Ответ

Браузер выделяет и освобождает память для DOM-элементов, используя сборщик мусора, который удаляет объекты без ссылок. При манипуляциях с DOM рекомендуется минимизировать количество изменений, использовать DocumentFragment или клонирование узлов для пакетного обновления, а также применять отложенное или батчевое обновление для снижения числа перерасчетов стилей и перерисовок. Важно избегать утечек памяти через ссылки на удалённые элементы и очищать обработчики событий.

#lexicon #собеседование #angular #middle #frontend #core

📚 4000+ вопросов для подготовки к IT-собеседованиям

❓ Вопрос

Как конкретно в Angular вы реализуете автоматическую отписку от Observable при уничтожении компонента?

✅ Ответ

Для автоматической отписки в Angular обычно используют оператор takeUntil в сочетании с subject, который вызывается в ngOnDestroy. В компоненте создают subject, например, private destroy$ = new Subject<void>(), и в ngOnDestroy вызывают destroy$.next() и destroy$.complete(), что завершает поток подписок. Это позволяет избежать утечек памяти, гарантируя отписку от всех Observable при уничтожении компонента.

#lexicon #собеседование #angular #junior

📚 4000+ вопросов для подготовки к IT-собеседованиям

#quiz #lexicon #собеседование #angular #senior

📘 Разбор опроса | Change Detection

❓ Вопрос
Как вручную запустить проверку изменений в OnPush компоненте?

✅ Ответ
ChangeDetectorRef.detectChanges()

💡 Почему это важно
Стратегия OnPush проверяет изменения только при:
• изменении @Input
• событиях внутри компонента

Если данные обновляются вне стандартного потока — нужно вручную триггерить проверку через detectChanges().

⚠️ Ловушка
NgZone.run() ≠ detectChanges()
Он запускает код внутри зоны Angular, но не гарантирует обновление конкретного компонента.

🛠 Практика
Используй detectChanges() для точечных обновлений в OnPush компонентах — это помогает избежать лишних перерендеров.

📚 Больше 4000 вопросов для подготовки к IT-собеседованиям

❓ Вопрос

Как реализовать динамическую форму с использованием FormArray, с возможностью добавлять и удалять элементы? Какие вопросы стоит учесть по UX при работе с такими формами?

✅ Ответ

Динамическая форма с FormArray реализуется путем создания массива контролов, который можно программно расширять или сокращать через методы push() и removeAt(). Каждый элемент FormArray представляет собой отдельный контрол или группу контролов, что позволяет гибко управлять структурой формы. При работе с такими формами важно учитывать UX, обеспечивая понятные кнопки добавления и удаления элементов, подтверждение удаления для предотвращения случайных действий, а также отображение ошибок валидации непосредственно возле изменяемых полей для своевременной обратной связи.

#lexicon #собеседование #angular #senior

📚 4000+ вопросов для подготовки к IT-собеседованиям

#quiz #lexicon #собеседование #angular #middle #advanced

📘 Разбор опроса\n\nБезопасность конфигураций CI/CD\n\n❓ Вопрос\n\nБезопасное управление секретами в конфигурациях окружений\n\n✅ Ответ\n\nИспользование переменных окружения CI/CD системы\n\n💡 Почему\n\nCI/CD системы предоставляют защищенные хранилища для секретов, которые не попадают в репозиторий и доступны только во время сборки.\n\n⚠️ Ловушка\n\nХранение секретов в репозитории, даже зашифрованных, создает риски утечки при доступе к истории коммитов.\n\n🛠 Практика\n\nИспользуйте environment variables в GitHub Actions, GitLab CI или аналогичных системах для хранения API ключей и токенов.\n\n📚 4000+ вопросов для подготовки к IT-собеседованиям

#quiz #lexicon #собеседование #angular #middle

📘 Разбор опроса

🧩 Валидация в компонентном обмене

❓ Вопрос: Где делать валидацию при @Input/@Output?

✅ Правильный ответ: В дочернем компоненте

💡 Почему: @Input передает данные в дочерний компонент, где их нужно проверить. @Output отправляет данные наружу, поэтому валидация должна быть выполнена до эмита события. Это сохраняет инкапсуляцию логики компонента.

⚠️ Где ошибаются: Попытка валидировать в родителе нарушает принцип единственной ответственности и усложняет поддержку.

🛠 На практике: В дочернем компоненте: validateData() перед this.dataChange.emit(value);

📚 4000+ вопросов для подготовки к IT-собеседованиям

#quiz #lexicon #собеседование #angular #junior #frontend

📘 Разбор опроса

🧩 Делегирование событий и производительность DOM

❓ Вопрос: Как делегирование событий влияет на производительность при множестве элементов?

✅ Правильный ответ: Уменьшает количество обработчиков, используя всплытие

💡 Почему: Делегирование назначает один обработчик на общего родителя, который перехватывает события дочерних элементов через механизм всплытия. Это сокращает количество обработчиков в DOM, снижая нагрузку на память и улучшая произ...

⚠️ Где ошибаются: Думать, что нужно создавать отдельный обработчик для каждого элемента или отключать всплытие.

🛠 На практике: В Angular используйте (click) на родительском элементе с проверкой target, например: (click)="onClick($event)" в шаблоне.

📚 4000+ вопросов для подготовки к IT-собеседованиям

❓ Вопрос

Расскажите, как вы реализуете side effects в NgRx. Какие инструменты и подходы применяете для управления асинхронными запросами?

✅ Ответ

Для реализации побочных эффектов в NgRx применяется библиотека @ngrx/effects, которая позволяет слушать экшены и выполнять асинхронные операции, такие как HTTP-запросы. Реализуются эффекты с помощью операторов RxJS, например switchMap для отмены предыдущих запросов и catchError для обработки ошибок. Важно разделять чистую логику редьюсеров и side effects, обеспечивая предсказуемость и поддерживаемость состояния.

#lexicon #собеседование #angular #middle

📚 4000+ вопросов для подготовки к IT-собеседованиям

#quiz #lexicon #собеседование #angular #junior #frontend