Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як уникнути «props drilling» під час передавання стану?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**«Props drilling»** - це коли ти протягуєш дані через ланцюжок проміжних компонентів, які самі ці дані не використовують, але зобов'язані передавати їх далі. **Ключове:** головна ідея - не тягати дані через зайвих посередників, а мати одне спільне джерело: сервіс, сигнал або store.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення«Props drilling» - це коли ти **протягуєш дані через ланцюжок проміжних компонентів**, які самі ці дані не використовують, але зобов'язані передавати їх далі. В Angular цього можна уникнути кількома способами. --- ### 1. Shared сервіс Найпоширеніший варіант: створюєш сервіс, у якому зберігається спільний стан (через `signal` або `BehaviorSubject`), і **всі потрібні компоненти** отримують до нього доступ через DI. ```ts @Injectable({ providedIn: 'root' }) export class ThemeService { theme = signal<'light' | 'dark'>('light'); } ``` Тепер і батько, і внук просто інжектять цей сервіс: ```ts constructor(private theme: ThemeService) {} ``` --- ### 2. Використовувати `inject()` і signals у локальних зонах Якщо стан потрібен тільки всередині певної гілки, можна створити **feature-сервіс**, наданий через `providers` у батьківському компоненті. Тоді він буде спільним лише для цієї гілки, а не для всього застосунку. --- ### 3. Бібліотека для state management Для великих проєктів - NgRx, NGXS, Akita тощо. Там стан централізовано, і жодного "прокидування вниз" уже не потрібно. --- ### 4. Content projection / ViewProviders Іноді можна уникнути передавання даних, просто спроєктувавши компонент по-іншому - щоб він **сам** знав, звідки брати потрібне, а не чекав "згори". --- **Висновок:** Головна ідея - **не тягати дані через зайвих посередників**. Краще одне спільне джерело (сервіс, сигнал, store), ніж п'ять рівнів `@Input` і `@Output`, через які проходить усе підряд.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.