В Angular компонентам часто необходимо взаимодействовать друг с другом, особенно когда между ними существуют отношения «родитель-потомок». Один из распространенных сценариев — когда дочернему компоненту необходимо поделиться данными со своим родительским компонентом. В этой статье мы рассмотрим несколько методов обеспечения обмена данными от дочернего элемента к родительскому с помощью ViewChild в Angular. Мы предоставим примеры кода, чтобы продемонстрировать каждый метод и обсудить их плюсы и минусы.

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

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

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    <button (click)="emitData()">Send Data to Parent</button>
  `,
})
export class ChildComponent {
  @Output() dataEvent = new EventEmitter<string>();
  emitData() {
    const data = 'Hello from child!';
    this.dataEvent.emit(data);
  }
}

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

import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    <app-child (dataEvent)="receiveData($event)"></app-child>
    <div>{{ receivedData }}</div>
  `,
})
export class ParentComponent {
  receivedData: string;
  receiveData(data: string) {
    this.receivedData = data;
  }
}

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

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

import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class DataService {
  sharedData: string;
}

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

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

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

import { Component } from '@angular/core';
import { DataService } from '../data.service';
@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <div>{{ dataService.sharedData }}</div>
  `,
})
export class ParentComponent {
  constructor(public dataService: DataService) {}
}

Метод 3: ссылочная переменная шаблона
Ссылочная переменная шаблона также может использоваться для передачи данных от дочернего компонента к его родительскому. Дочерний компонент может обновлять значение переменной, а родительский компонент может получить к ней доступ. Вот пример:

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

import { Component } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    <input #inputField type="text" />
    <button (click)="updateData(inputField.value)">Send Data to Parent</button>
  `,
})
export class ChildComponent {
  updateData(data: string) {
    const newData = 'Hello from child: ' + data;
    // Do something with the data
  }
}

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

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
    <button (click)="getDataFromChild()">Get Data from Child</button>
  `,
})
export class ParentComponent {
  @ViewChild('inputField') inputField: ElementRef;
  getDataFromChild() {
    const childData = this.inputField.nativeElement.value;
    // Do something with the childData
  }
}

В этой статье мы рассмотрели три метода обмена данными из дочернего компонента с его родительским с помощью ViewChild в Angular. Методы Event Emitter, Service и Template Reference Variable предоставляют разные подходы для достижения желаемого взаимодействия. Выберите метод, который лучше всего соответствует вашим конкретным требованиям и структуре проекта. Используя эти методы, вы можете создать эффективное взаимодействие между родителями и детьми в своих приложениях Angular.