В Angular обмен данными между компонентами является общим требованием. Когда дело доходит до обмена данными с дочерними компонентами, вы можете использовать несколько методов. В этой статье мы рассмотрим различные подходы и приведем примеры кода для демонстрации каждого метода.

Метод 1: привязка ввода
Самый простой способ поделиться данными с дочерним компонентом — использовать привязку ввода. В шаблоне родительского компонента вы можете передать данные дочернему компоненту следующим образом:

Шаблон родительского компонента:

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

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

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    <h2>Child Component</h2>
    <p>Data from parent: {{ data }}</p>
  `
})
export class ChildComponent {
  @Input() data: any;
}

Метод 2: Сервис
Другой подход — использовать общий сервис для связи между компонентами. Вы можете создать службу с BehaviorSubject или subject для хранения данных.

Общая служба:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataService {
  private dataSubject = new BehaviorSubject<any>(null);
  data$ = this.dataSubject.asObservable();
  sendData(data: any) {
    this.dataSubject.next(data);
  }
}

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

import { Component } from '@angular/core';
import { DataService } from 'path-to-data-service';
@Component({
  selector: 'app-parent',
  template: `
    <button (click)="sendDataToChild()">Send Data</button>
  `
})
export class ParentComponent {
  constructor(private dataService: DataService) {}
  sendDataToChild() {
    const data = 'Hello from parent!';
    this.dataService.sendData(data);
  }
}

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

import { Component, OnDestroy } from '@angular/core';
import { DataService } from 'path-to-data-service';
import { Subscription } from 'rxjs';
@Component({
  selector: 'app-child',
  template: `
    <h2>Child Component</h2>
    <p>Data from parent: {{ data }}</p>
  `
})
export class ChildComponent implements OnDestroy {
  data: any;
  private subscription: Subscription;
  constructor(private dataService: DataService) {
    this.subscription = this.dataService.data$.subscribe(data => {
      this.data = data;
    });
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Метод 3: ViewChild
Если дочерний компонент является прямым дочерним элементом родительского компонента, вы можете использовать ViewChild для прямого доступа к свойствам и методам дочернего компонента.

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

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from 'path-to-child-component';
@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <button (click)="sendDataToChild()">Send Data</button>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent;
  sendDataToChild() {
    const data = 'Hello from parent!';
    this.childComponent.receiveData(data);
  }
}

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

import { Component } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    <h2>Child Component</h2>
    <p>Data from parent: {{ data }}</p>
  `
})
export class ChildComponent {
  data: any;
  receiveData(data: any) {
    this.data = data;
  }
}

В этой статье мы рассмотрели несколько способов обмена данными с дочерним компонентом в Angular. Мы рассмотрели привязку ввода с использованием общего сервиса и ViewChild. В зависимости от вашего конкретного варианта использования вы можете выбрать наиболее подходящий метод для вашего приложения. Реализуя эти методы, вы можете эффективно обмениваться данными между компонентами Angular.

Не забудьте учитывать требования вашего приложения и выбрать метод, который лучше всего соответствует вашим потребностям. Приятного кодирования!