Взаимодействие компонент Angular?

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

Для передачи данных между компонентами можно использовать свойства (properties) и вводные данные (input). Свойства позволяют передавать данные от родительского компонента к дочернему, а вводные данные позволяют принимать данные извне в компонент. В обоих случаях данные передаются в виде обычных JavaScript объектов.

Пример использования свойств:

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

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child [name]="parentName"></app-child>
  `
})
export class ParentComponent {
  parentName = 'John';
}

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

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

@Component({
  selector: 'app-child',
  template: `
    <h1>Child component</h1>
    <p>Parent's name: {{ name }}</p>
  `
})
export class ChildComponent {
  @Input() name: string;
}

В этом примере родительский компонент передает значение свойства parentName дочернему компоненту с помощью привязки [name]="parentName". Дочерний компонент принимает это значение с помощью декоратора @Input() и отображает его в шаблоне.

Еще одним способом передачи данных между компонентами является использование сервисов. Сервисы позволяют создавать общие данные и методы, которые могут быть использованы разными компонентами.

Пример использования сервиса:

Сервис:

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

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

  getData() {
    return this.data;
  }

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

Компоненты:

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

@Component({
  selector: 'app-parent',
  template: `
    <input [(ngModel)]="inputValue" (change)="setData()" placeholder="Enter data">
  `
})
export class ParentComponent {
  inputValue: string;

  constructor(private dataService: DataService) {}

  setData() {
    this.dataService.setData(this.inputValue);
  }
}

@Component({
  selector: 'app-child',
  template: `
    <h1>Child component</h1>
    <p>Data: {{ dataService.getData() }}</p>
  `
})
export class ChildComponent {
  constructor(private dataService: DataService) {}
}

В этом примере родительский компонент использует сервис DataService, чтобы установить значение данных, введенных в поле ввода. Дочерний компонент использует сервис, чтобы получить это значение и отобразить его в шаблоне.

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

Пример использования событий:

Компоненты:

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

@Component({
  selector: 'app-parent',
  template: `
    <button (click)="sendMessage()">Send message</button>
  `
})
export class ParentComponent {
  @Output() messageEvent = new EventEmitter<string>();

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

@Component({
  selector: 'app-child',
  template: `
    <h1>Child component</h1>
    <button (click)="handleClick()">Click me</button>
  `
})
export class ChildComponent {
  handleClick() {
    console.log('Button clicked in child component');
  }
}

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

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