Як передавати стан між батьківським і дочірнім компонентом?
Стан між батьком і дочірнім компонентом передається через @Input і @Output - це стандартний механізм зв'язку в Angular.
1. Передавання вниз - через @Input
Батько дає дані дочірньому:
ts
// батьківський шаблон
<app-child [count]="parentCount"></app-child>ts
// у дочірньому компоненті
@Input() count!: number;2. Передавання вгору - через @Output і EventEmitter
Дочірній компонент повідомляє батька про зміни:
ts
// у дочірньому компоненті
@Output() increment = new EventEmitter<void>();
someMethod() {
this.increment.emit();
}html
<!-- батько підписується на подію -->
<app-child (increment)="handleIncrement()"></app-child>3. Альтернатива - shared-сервіс
Якщо компоненти складно пов'язані напряму (або перебувають глибше в ієрархії), можна використати спільний сервіс із signal, BehaviorSubject або store.
Висновок:
- @Input - щоб дати значення
- @Output - щоб отримати реакцію
- shared-сервіс - якщо потрібно розділити стан між кількома рівнями або гілками дерева компонентів.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.