В 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;
}

1. Обмен данными между дочерними элементами.
   Иногда дочернему компоненту необходимо уведомить родительский компонент о событии или отправить ему данные обратно. Этого можно добиться с помощью свойств вывода и EventEmitter. Вот пример:

// Child Component
@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!');
  }
}
// Parent Component
@Component({
  selector: 'app-parent',
  template: `
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
    <p>{{ message }}</p>
  `
})
export class ParentComponent {
  message: string;
  receiveMessage($event: string) {
    this.message = $event;
  }
}

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

// Shared Service
@Injectable()
export class DataService {
  sharedData = new BehaviorSubject<string>('Hello from service!');
}
// Component A
@Component({
  selector: 'app-component-a',
  template: `
    <button (click)="updateSharedData()">Update Shared Data</button>
  `
})
export class ComponentA {
  constructor(private dataService: DataService) {}
  updateSharedData() {
    this.dataService.sharedData.next('New data from Component A');
  }
}
// Component B
@Component({
  selector: 'app-component-b',
  template: `
    <p>{{ sharedData }}</p>
  `
})
export class ComponentB {
  sharedData: string;
  constructor(private dataService: DataService) {}
  ngOnInit() {
    this.dataService.sharedData.subscribe(data => {
      this.sharedData = data;
    });
  }
}

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