Проблема передачи данных из одного компонента в другой компонент с использованием служб в Angular 8

Question

Я работаю над API-интерфейсом, основанным на CRUD для одностраничного приложения, в котором передаю данные из внешнего интерфейса в внутренний с помощью JWT, который работает нормально.На бэкэнде я сохраняю данные в базе данных, а затем извлекаю все данные и возвращаю их в качестве ответа на внешний интерфейс, который работает нормально.

На внешнем интерфейсе я получаю данные в ответе и передаю другому компоненту.через Сервис.В основном я передаю данные из компонента create для показа компонента через службу под названием Shared service.Передача данных (ответ от бэкэнда - это массив объектов Javascript).

проблема в том, что данные не достигают компонента show, так как я хочу после того, как он достигнет компонента show, через который я хочу пройти циклмассив объектов и показать их в представлении (show.component.html) в виде таблицы

Помогите, пожалуйста?

Создать компонент

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { SharedService } from 'src/app/Services/shared.service';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {

  public form = {
    sponsorFirstName: null,
    sponsorSurName: null,
    sponsorEmail: null,
    sponsorPhone: null,
    nationality: null,
    childFirstName: null,
    childAge: null,
    childSurName: null,
    childGender: null
  };

  public error = null;

  constructor(
       private router: Router,
       private Shared : SharedService) { }

   onSubmit(){
    this.Auth.submitFormData(this.form).subscribe(
      data => this.handleResponse(data),
      error => this.handleError(error)
    );
  }

  handleResponse(data){
    //console.log(data.data);
    //pass the data to the shared service
    this.Shared.createData(data.data);
    //redirect to show-data component whereby I show the data in a table
    this.router.navigateByUrl('/show-data');
  }

  handleError(error){
      this.error = error.error.errors;
  }

  ngOnInit() {
  }
}

Общая служба

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { TokenService } from './token.service';

@Injectable({
  providedIn: 'root'
})
export class SharedService {

    private userData = new BehaviorSubject;
    checkUser$ = this.userData.asObservable();

    createData(data:any){
       this.userData.next(data);
    }

    constructor(private Token : TokenService) { }
}

Файл Show.component.ts

import { Component, OnInit } from '@angular/core';
import { SharedService } from 'src/app/Services/shared.service';

@Component({
  selector: 'app-show',
  templateUrl: './show.component.html',
  styleUrls: ['./show.component.css']
})
export class ShowComponent implements OnInit {

  public userData;

  constructor(
    private Shared : SharedService,
    ) { }

  ngOnInit() {
    this.Shared.checkUser$.subscribe(message => this.userData = message);
  }

}

Answer 1

Похоже на состояние гонки между сервисом и вашим компонентом, вы должны попытаться создать userData с ReplaySubject(1), например, так:

private userData = new ReplaySubject(1);

Таким образом, ваш предметбудет иметь буфер, и даже если вы поздно подпишетесь на него, у вас будет значение.

ReplaySubject

Объект, который «воспроизводит» или выдает старые значения новым подписчикам