无法在Angular 5中的子组件之间共享可观察的主题服务

我有一个应用程序，其中我正在使用angular cdk stepper，我正在尝试在两个子步骤组件中的一个公共孙子组件之间共享数据

第一个子项传递数据以填充孙子项，但问题似乎是stepper同时初始化两个组件，并且由于第一个子项必须进行服务调用以填充孙子项，因此第二个子项的子项使用不完整的数据进行初始化

parent.component.html：

<app-custom-stepper>
<cdk-step [stepControl]="frmStep1" #step1="cdkStep">
<ng-template cdkStepLabel>Step1</ng-template>
    <form #frmStep1="ngForm">
        <child1 [myData]="myData"></child1>
    </form>
    <button cdkStepperPrevious>Prev</button>
    <button cdkStepperNext>Next</button>
</cdk-step>
<cdk-step cdkStep #step2="cdkStep">
    <form #frmStep2="ngForm">
        <child2></child>
    </form>
    <button cdkStepperPrevious>Prev</button>
    <button cdkStepperNext>Next</button>
</cdk-step>

<sharedGrandchild [myData]="myData"></sharedGrandchild>

我尝试过的事情：

使用BehaviorSubjects和Subjects（与上面的代码类似） 使用开关延迟第二个子组件的初始化 尝试使用其他生命周期挂钩来初始化订阅第二个child组件

---

问题在于时间安排，第一个子项通过孙子项激发的请求需要很长时间才能返回，因此第二个子项中的孙子项订阅的对象仅部分存在。这似乎从未得到更新。因此，页面上的第一个子项加载良好，因为它直接命中服务，而stepper第二页上的第二个子项由于同时初始化而具有不完整的数据

您应该按照这些步骤来确保数据被异步共享-

1.使用

BehaviorSubject

存储最后设置的值

   myData:Subject<any> = new BehaviorSubject<any>(null);

3.确保公共模块、主模块或根模块中提供了

ParentService

<sharedGrandchild></sharedGrandchild>

@Input() myData:MyData;
ngOnInit() {
  if(this.myData) {
    //call service that populates data, this only happens on the page
    //step of the stepper
    this.parentService.setMyData(response);
  } else {
    this.parentService.getMyData()
      .subscribe( myData => {
        this.myData = myData 
      }
   };

   myData:Subject<any> = new BehaviorSubject<any>(null);

@Input() myData:MyData;
ngAfterViewInit() {
  if(this.myData) {
    //call service that populates data, this only happens on the page
    //step of the stepper
    this.parentService.setMyData(response);
  } else {
    this.parentService.getMyData()
      .subscribe( myData => {
        this.myData = myData 
      }
   };