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

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

// Parent Component
@Component({
  selector: 'app-parent',
  template: `
    <app-child [data]="parentData"></app-child>
  `
})
export class ParentComponent {
  parentData = 'Hello from parent!';
}
// Child Component
@Component({
  selector: 'app-child',
  template: `
    <p>{{ data }}</p>
  `
})
export class ChildComponent {
  @Input() data: string;
}

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

// Parent Component
import { ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
  `
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent;
  passDataToChild() {
    this.childComponent.data = 'Hello from parent!';
  }
}
// Child Component
@Component({
  selector: 'app-child',
  template: `
    <p>{{ data }}</p>
  `
})
export class ChildComponent {
  data: string;
}

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

// Data Service
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class DataService {
  private sharedData: string;
  getData(): string {
    return this.sharedData;
  }
  setData(data: string) {
    this.sharedData = data;
  }
}
// Parent Component
@Component({
  selector: 'app-parent',
  template: `
    <button (click)="passDataToChild()">Pass Data</button>
  `
})
export class ParentComponent {
  constructor(private dataService: DataService) {}
  passDataToChild() {
    this.dataService.setData('Hello from parent!');
  }
}
// Child Component
@Component({
  selector: 'app-child',
  template: `
    <p>{{ data }}</p>
  `
})
export class ChildComponent {
  constructor(private dataService: DataService) {}
  get data(): string {
    return this.dataService.getData();
  }
}

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

// Parent Component
@Component({
  selector: 'app-parent',
  template: `
    <app-some-other-component #child></app-some-other-component>
    <button (click)="passDataToChild(child)">Pass Data</button>
  `
})
export class ParentComponent {
  passDataToChild(childComponent: any) {
    childComponent.setData('Hello from parent!');
  }
}
// Child Component
@Component({
  selector: 'app-some-other-component',
  template: `
    <p>{{ data }}</p>
  `
})
export class SomeOtherComponent {
  data: string;
  setData(data: string) {
    this.data = data;
  }
}

Метод 5: Event Emitter
Если вам нужно передать данные от родительского компонента дочернему в ответ на событие, вы можете использовать класс EventEmitter. Родительский компонент генерирует событие, а дочерний компонент прослушивает это событие и получает данные. Вот пример:

// Parent Component
@Component({
  selector: 'app-parent',
  template: `
    <button (click)="passDataToChild()">Pass Data</button>
  `
})
export class ParentComponent {
  @Output() dataPassed = new EventEmitter<string>();
  passDataToChild() {
    this.dataPassed.emit('Hello from parent!');
  }
}
// Child Component
@Component({
  selector: 'app-child',
  template: `
    <p>{{ data }}</p>
  `
})
export class ChildComponent {
  @Input() data: string;
  ngOnChanges(changes: SimpleChanges) {
    if (changes.data && changes.data.currentValue) {
      // handle data change
    }
  }
}

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