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

1. Привязка ввода:
   Привязка ввода — это самый простой метод передачи аргументов в Angular. Он позволяет передавать данные из родительского компонента в дочерний с помощью декоратора @Input. Вот пример:

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

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

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

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

1. Привязка вывода с помощью EventEmitter:
   Привязка вывода используется для передачи данных из дочернего компонента в родительский компонент. Он предполагает использование декоратора @Output вместе с EventEmitter. Вот пример:

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

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();
  sendMessage() {
    this.messageEvent.emit('Hello from child');
  }
}

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

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

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

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

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class DataService {
  private messageSource = new Subject<string>();
  message$ = this.messageSource.asObservable();
  sendMessage(message: string) {
    this.messageSource.next(message);
  }
}

Компонент А:

import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
  selector: 'app-component-a',
  template: `
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ComponentA {
  constructor(private dataService: DataService) {}
  sendMessage() {
    this.dataService.sendMessage('Hello from Component A');
  }
}

Компонент Б:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
  selector: 'app-component-b',
  template: `
    <p>{{ message }}</p>
  `
})
export class ComponentB implements OnInit {
  message: string;
  constructor(private dataService: DataService) {}
  ngOnInit() {
    this.dataService.message$.subscribe(message => {
      this.message = message;
    });
  }
}

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