Angular: обмен данными между компонентами

Question

Допустим, у меня есть 3 компонента, а именно A, B и C. Компонент A имеет это в своем HTML:

// a.component.html
<b-component></b-component>
<c-component></c-component>

Есть ли способ, с помощью которого компонент A может отправлять данные каждому из B и C и просить их время от времени обновлять?

Кстати, вопрос в Angular, а не AngularJS.

Answer 1

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/#Unrelated-Components-Sharing-Data-with-a-Service

Поскольку компоненты не связаны, обмен данными через Service является хорошим вариантом.

Answer 2

Да, вы можете сделать это, как показано ниже. data_item из компонента a будет отправлено компоненту b.

a.component.html

<b-component [data]="data_item"></b-component>

b.component.ts

@Input()
data: any

Простая демонстрация здесь: https://stackblitz.com/edit/angular-data-to-component?file=src/app/app.component.html

Answer 3

Использовать свойство A в качестве входного параметра для B & C

Answer 4

https://angular.io/guide/component-interaction этот документ очень полезен. Вы устанавливаете @output из компонента A и устанавливаете @input в компонентах B и C. Когда значение этого изменения вариабеля генерирует событие из A, которое должно обрабатываться в B и C

это пример кода https://stackblitz.com/edit/angular-component-interaction-4?file=app%2Fvoter%2Fvoter.component.ts