Как реализовать передачу данных между двумя компонентами в Angular 7?

Question

[Aleksandr]

Есть два соседних компонента

<b2b-acquiring *ngIf="resultSearchByNumber" [inputData]="resultSearchByNumber"></b2b-acquiring>
<b2b-restart-business-process></b2b-restart-business-process>

В компоненте b2b-acquiring есть метод, который отправляет запрос на сервер и вот ответ, который приходит мне нужно передать в b2b-restart-business-process

Метод отправки

getPayInfoExtended(obj: any) {
    this.resultSearchByNumber = null;
    this.resultSearchByNumber = obj;
    this.resultGetPayInfoExtended = null;
    return this.http.post(`${this.baseUrl}`+'getpayinfoextended?', this.resultSearchByNumber).subscribe(res => {
        this.resultGetPayInfoExtended = res;
    },
    error => {
        console.log(error)
    })
}

Я почитал про @Output но не могу понять как он работает. Объясните на пальцах пожалуйста

UPDATE

Я попробовал через @Output

В компоненте b2b-acquiring

@Output() payInfo = new EventEmitter();

sendDateToParent() {
    this.payInfo.emit(this.resultGetPayInfoExtended);
}

В родительском компоненте

payInfoTest(evnt) {
    this.payInfoData = null;
    this.payInfoData = evnt;
    console.log(this.payInfoData)
}

<b2b-acquiring *ngIf="resultSearchByNumber" [inputData]="resultSearchByNumber" (payInfo)="payInfoTest($event)"></b2b-acquiring>

В консоли выводит то, что мне нужно

Как теперь передать это дело в другой компонент b2b-restart-business-process?

Попробовал через @Input
В нужном компоненте @Input() inputData2;

<b2b-restart-business-process [inputData2]="payInfoData"></b2b-restart-business-process>

И пытаюсь данные вывести {{ inputData2 | json }}
Но реакции 0, что не так делаю?

Answer 1

[Антон Швец]

Это вообще не так все делается.

В компоненте b2b-acquiring есть метод, который отправляет запрос на сервер

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

@Output() в первом компоненте если хотите использовать, то он должен показывать не данные, а событие по которому родительский компонент запросит данные.

Comments

[Aleksandr]

То есть все методы для работы с данными нужно вынести в отдельный сервис?
И можно где-то посмотреть пример того, что вы описали? Антон Швец

[Антон Швец]

Aleksandr, конечно, например вот здесь
https://angular.io/guide/http

Если на данные с запроса нужно подписаться в нескольких местах можно закэшить запрос, например так

[Aleksandr]

Антон Швец, Спасибо