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