Как работает передача данных между компонентами angular?

В Angular есть несколько способов передачи данных между компонентами. Рассмотрим каждый из них.

1. Использование входных и выходных свойств (@Input и @Output): С помощью входных и выходных свойств можно передавать данные между родительским и дочерним компонентами. Для передачи данных от родительского компонента к дочернему используется входное свойство, которое объявляется в дочернем компоненте с помощью декоратора @Input. Например:

ParentComponent:

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

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <app-child [message]="message"></app-child>
  `
})
export class ParentComponent {
  message = 'Hello from parent';
}

ChildComponent:

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

@Component({
  selector: 'app-child',
  template: `
    <h2>Child Component</h2>
    <p>{{ message }}</p>
  `
})
export class ChildComponent {
  @Input() message: string;
}

Таким образом, родительский компонент передает свое свойство "message" дочернему компоненту с помощью атрибута [message]="message".

2. Использование сервиса: Сервисы в Angular предоставляют механизм для обмена данными между компонентами. Сервис может быть внедрен в несколько компонентов, и каждый компонент может использовать его методы и свойства для передачи и получения данных. Например:

DataService:

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

@Injectable()
export class DataService {
  private data: string;

  getData() {
    return this.data;
  }

  setData(data: string) {
    this.data = data;
  }
}

ParentComponent:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <button (click)="setData()">Set Data</button>
  `
})
export class ParentComponent {
  constructor(private dataService: DataService) { }

  setData() {
    this.dataService.setData('Hello from parent');
  }
}

ChildComponent:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-child',
  template: `
    <h2>Child Component</h2>
    <p>{{ data }}</p>
  `
})
export class ChildComponent {
  constructor(private dataService: DataService) { }

  get data(): string {
    return this.dataService.getData();
  }
}

Таким образом, родительский компонент вызывает метод setData() сервиса, чтобы установить данные, а дочерний компонент вызывает метод getData() сервиса, чтобы получить данные.

3. Использование событийного шаблона: Angular предоставляет событийный шаблон, который позволяет компонентам слушать и генерировать события. Компонент может генерировать пользовательские события с помощью @Output декоратора, а другие компоненты могут подписаться на эти события с помощью шаблонного синтаксиса. Например:

ParentComponent:

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

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
    <p>{{ message }}</p>
  `
})
export class ParentComponent {
  message: string;

  receiveMessage(message: string) {
    this.message = message;
  }
}

ChildComponent:

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <h2>Child Component</h2>
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Hello from child');
  }
}

Таким образом, при нажатии на кнопку в дочернем компоненте генерируется событие messageEvent, которое передает сообщение "Hello from child" в родительский компонент.

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