Как передать данные из родительского компонента в дочерний?angular-23

Основные способы передачи данных

В Angular существует несколько способов передачи данных от родительского к дочернему компоненту:

1. Input-свойства

Родительский компонент:

<app-child [inputData]="parentData"></app-child>

parentData = 'Data from parent';

Дочерний компонент:

import { Input } from '@angular/core';

@Input() inputData: string;

Использование в дочернем шаблоне:

<p>Received data: {{ inputData }}</p>

2. Setter-методы для Input-свойств

Позволяют добавить логику при изменении входного значения:

private _inputData: string;

@Input()
set inputData(value: string) {
  this._inputData = value;
  console.log('Data changed:', value);
}
get inputData(): string {
  return this._inputData;
}

3. ngOnChanges

import { Input, OnChanges, SimpleChanges } from '@angular/core';

ngOnChanges(changes: SimpleChanges) {
  if (changes.inputData) {
    console.log('Previous value:', changes.inputData.previousValue);
    console.log('Current value:', changes.inputData.currentValue);
  }
}

Дополнительные методы передачи данных

4. Через сервис

1. Создаем сервис:

@Injectable({ providedIn: 'root' })
export class DataService {
  private dataSubject = new BehaviorSubject<string>('');
  data$ = this.dataSubject.asObservable();

  setData(data: string) {
    this.dataSubject.next(data);
  }
}

2. Используем в компонентах: Родительский:

constructor(private dataService: DataService) {}

sendData() {
  this.dataService.setData(this.parentData);
}

Дочерний:

data: string;

constructor(private dataService: DataService) {
  this.dataService.data$.subscribe(data => {
    this.data = data;
  });
}

5. Через ViewChild

Родительский компонент:

import { ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@ViewChild(ChildComponent) childComponent: ChildComponent;

sendData() {
  this.childComponent.receiveData(this.parentData);
}

Дочерний компонент:

receiveData(data: string) {
  this.inputData = data;
}

Когда какой метод использовать?

Метод	Когда использовать	Плюсы	Минусы
Input-свойства	Простая передача данных	Простота, декларативность	Нет сложной логики
Setter/ngOnChanges	Нужна реакция на изменения	Гибкость	Усложняет код
Сервис	Обмен между несвязанными компонентами	Глобальный доступ	Сложнее отслеживать поток
ViewChild	Прямой доступ к дочернему компоненту	Максимальный контроль	Нарушает инкапсуляцию

Лучшие практики

1. Используйте Input-свойства по умолчанию для простых случаев
2. Избегайте сложных объектов в Inputs - передавайте примитивы или простые DTO
3. Для реактивности используйте Observable + Async pipe:

<app-child [data]="data$ | async"></app-child>

4. Имейте default значения для Input-свойств:

@Input() data: string = 'default';

5. Избегайте двустороннего binding ([( )]) если можно обойтись Input

Резюмируем

1. Основной способ - Input-свойства с декоратором @Input()
2. Для сложной логики:
   • Setter-методы
   • ngOnChanges
3. Альтернативные методы:
   • Общий сервис (для несвязанных компонентов)
   • ViewChild (для прямого доступа)
4. Рекомендации:
   • Держите компоненты максимально изолированными
   • Используйте простые структуры данных
   • Рассмотрите RxJS для сложных сценариев

Правильная передача данных между компонентами - ключ к поддерживаемой архитектуре Angular-приложения.