时间戳

首页 > 解决方案 > 无法在 Angular 5 中的孙子组件之间共享 Observable Subject 服务

angular - 无法在 Angular 5 中的孙子组件之间共享 Observable Subject 服务

问题描述

我有一个应用程序，我正在使用角度 cdk 步进器，并且我试图在两个子步进组件中的公共孙组件之间共享数据。

第一个孩子传递数据填充孙子，但问题似乎是步进器同时初始化两个组件，并且由于第一个孩子必须进行服务调用来填充孙子，所以第二个孩子的孩子被初始化数据不完整。

父组件.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>

父服务.ts

export class ParentService {
  myData:Subject<any> = new Subject<any>();

  setMyData(data: any) {
     this.myData.next(data);
  }

  getMyData(): Observable<any> {
     return this.myData.asObservable();
  }
}

child1.component.html：

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

child2.component.html

<sharedGrandchild></sharedGrandchild>

孙子.component.ts：

@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 
      }
   };

我尝试过的事情：

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

问题是时间问题，第一个孩子通过孙子触发的请求需要很长时间才能返回，所以第二个孩子中的孙子订阅了一个仅部分存在的对象。这似乎永远不会更新。所以页面上的第一个孩子加载很好，因为它直接点击服务，步进器第二页上的第二个孩子由于同时被初始化而数据不完整。

标签： angularreactjsobservablesubject

解决方案

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

1.BehaviorSubject用于存储最后的设定值。

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

2.在函数中读取和设置数据，ngAfterViewInit而不是ngOnInit

@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 
      }
   };

3.确保ParentService在公共模块或主模块或根模块中提供。

推荐阅读