Angular 8.0 Обмен данными между компонентом и сервисом

Question

Я работаю, чтобы автоматизировать ручную форму. Я новичок в angular.

У меня есть шаговый элемент управления в app.component с 5 шагами. Я создал 5 компонентов и поместил один внутри каждого степпера.

<mat-step label="Start">
    <app-project-location></app-project-location>            
</mat-step>    
<mat-step [stepControl]="licensedContractorFormGroup" label="Property Owner Information">
    <app-property-owner></app-property-owner>      
</mat-step>
<mat-step [stepControl]="licensedContractorFormGroup" label="Project In Charge">
    <app-project-in-change-details></app-project-in-change-details>
</mat-step>

У каждого внутреннего компонента выше есть кнопки для перехода к previous и next.

Когда я заполняю форму <app-project-location> и отправляю следующую, эта форма принимает форму ввода вызывает службу, которая вызывает API, и возвращает данные, заполненные в следующей таблице компонентов.

Вопрос:

Как я могу передать данные формы из этого компонента в другой компонент, который не имеет родительских и дочерних отношений?

Я вызвал сервис, и он возвращает объект JSON, как я могу сделать это вернуть как наблюдаемые?

Answer 1

Вы можете использовать наблюдаемые, как это:

Сервис

private message: Subject<Your_Data_Type>;

constructor() {
    this.message = new Subject<Your_Data_Type>();

    // set new value for variable and emit that
    this.message.next(new_value);
  }

public getMessage(): Observable<Your_Data_Type> {
    return this.message.asObservable();
  }

Компонент

и в вашем компоненте подписаться Ваша функция:

this.yourService.getMessage().subscribe(message => {
  this.data = message;
});

Answer 2

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

Затем, как сказал @ AliF50, вы должны проверить эту ссылку .

Итак, для краткости:

1) Поместите все глобальные переменные, которыми вы хотите поделиться между 5 вашими компонентами, в .component.ts компонента, содержащего степпер.

2) Используйте события Output в дочерних элементах (5 компонентов) для уведомления и отправки данных родительскому элементу (компоненту, содержащему степпер).

3) Родительский в зависимости от полученного события (из шага 1) , шаг 2 и т. д. c ..), затем установите переменные каждого потомка, используя свойства Input.