Question

我有一个父组件(B)，该组件从其父输入(A)获取数据 (C)具有(B)子组件。

在(B)内部，我有一个选择器，用于从存储中获取数据。

export class BComponent implements OnChanges {
    @Input() branchId;

  ngOnChanges() {
    this.selectedDataByBranch$ = this.store.pipe(
      select(selectBranchDirections, { branchId: this.branchId, dir: this.selectedDirection })
    );
    this.selectedDataByBranch$.subscribe(selectedDataByBranch => {
      this.trainsDatasets = this.getDatasets(selectedDataByBranch);
      this.lineChart.data.datasets = this.trainsDatasets ? this.trainsDatasets : [];
      this.lineChart.update();
    });
  directionChanged(event) {
    this.selectedDirection = event;
    this.selectedDataByBranch$ = this.store.pipe(
    select(selectBranchDirections, { branchId: this.branchId, dir: this.selectedDirection })
   );
  }
}

directionChanged是我从(C)中获取的Output事件

selectedDataByBranch订阅未在selectedDataByBranch$内部触发新数据更新的问题

我也尝试过这种方式

directionChanged(event) {
   this.selectedDirection = event;

  select(selectBranchDirections, { branchId: this.branchId, dir: this.selectedDirection });
}

Answer 1

我可以建议的是。将您的参数变成Subject，然后与商店选择合并，以您的directionChanged(event)方法为主题提供价值。

所以您的最终代码将如下所示：

export class BComponent implements OnChanges {
    @Input() branchId;
    criterias$= new Subject<{branchId:number,dir:number}>;
    ngOnChanges() {
      this.selectedDataByBranch$ = this.criterias$.pipe(mergeMap(criteria=> this.store.pipe(
      select(selectBranchDirections, { branchId: criteria.branchId, dir: this.searchDirection})
    )));    

    this.selectedDataByBranch$.subscribe(selectedDataByBranch => {
      this.trainsDatasets = this.getDatasets(selectedDataByBranch);
      this.lineChart.data.datasets = this.trainsDatasets ? this.trainsDatasets : [];
      this.lineChart.update();
    });
    this.criterias$.next({branchId:this.branchId,dir:this.sortDirection}); // init first call
   }    
  directionChanged(event) {
    this.selectedDirection = event;
    this.criterias$.next({ branchId: criteria.branchId, dir: this.searchDirection}});
   );
  }
}

这个stackblitz试图实现我所说的话。

更新ngOnChanges中的ngrx选择器

1 个答案: