Как передать данные по маршруту, перейдите в функцию отправки (Angular)

Question

У меня есть функция отправки, когда я отправляю данные с сервера. Я хочу, чтобы данные, которые я получаю, передавались другим компонентам.

Это моя функция

  submitForm(partner, manager, taxDevision, taxYear, standard, date) {
    const type = 1;
    if (partner && manager && taxDevision && taxYear && standard && date.value !== null && this.addValue !== '') {
      const day = date.value.getDate();
      const month = date.value.getMonth() + 1;
      const year = date.value.getFullYear();
      const newDate = `${year}-${month}-${day}`;
      this.reportsService.createNewReport(this.addValue, type, taxYear, newDate, (data) => this.onCreateReportSuccess(data));
    } else {
      this.errorLabel = 'Fill all field';
    }
  }
  onCreateReportSuccess(data) {
    console.log(data);
    this.dialogRef.close();
    this.router.navigate(['/kit']);
  }
}

Answer 1

Я нашел решение:

  submitForm(partner, manager, taxDevision, taxYear, standard, date) {
    const type = 1;
    if (partner && manager && taxDevision && taxYear && standard && date.value !== null && this.addValue !== '') {
      const day = date.value.getDate();
      const month = date.value.getMonth() + 1;
      const year = date.value.getFullYear();
      const newDate = `${year}-${month}-${day}`;
      this.reportsService.createNewReport(this.addValue, type, taxYear, newDate, (data) => this.onCreateReportSuccess(data));
    } else {
      this.errorLabel = 'Fill all field';
    }
  }
  onCreateReportSuccess(data) {
    this.dialogRef.close();
    this.router.navigate(['/kit'], { queryParams: data[0] });
  }

Получить компонент Data on Kit:

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) { }
ngOnInit() {
    this.route
      .queryParams
      .subscribe(reportData => {
        console.log(this.reportData);
      });
  }

Answer 2

Рассматривая следующую реализацию сервиса

export class ReportService{
    postedReport: BehaviorSubject<any> = new BehaviorSubject<any>(null);
    ...
    createNewReport(...){
        return this.http.post(...).pipe(tap((response)=>{
            this.postedReports.next(response);
        }));
    }

}

Используя rxjs pipe и tap , мы подключаемся к асинхронному ответу и сохраняем его в BehaviorSubject.

Затем воспроизводим этот фрагмент из вашего исходного кода,

export class componentA{
    constructor(public reportService: ReportService,...){}
    ...
    submitForm(){
        this.reportService.createNewReport(...)
        .toPromise().then(() => console.log('post'));
    }
}

Здесь, наконец, мы можем прочитать значение ответа нашего сервиса в компоненте B

export class componentB{
    constructor(public reportService: ReportService,...){
        let sub = this.reportService.postedReport.subscribe((report)=>{

                    console.table(report);
                  })
    }
    ...
    printReport(){
        console.log(this.reportService.postedReport.value)
    }
}

Пожалуйстаобратите внимание, что эти примеры являются неполными, и мы используем заполнители, такие как [...]

. В ответ на OP требуется привязка к ответу на вызов компонента componentA в componentB. Не используя функцию навигации, как было предложено, поскольку мы находимся в одном угловом приложении, сервис также работает и имеет преимущество в отделении навигации от запроса и хранения данных.