combineLatest 仅在第一个事件时触发。

Question

我有3个事件想要合并，在其中一个被触发时调用服务。我使用了combineLatest，但只有在filterChanged第一个事件被触发时才起作用。

filterChanged是本地事件，而其他事件来自子组件。如何解决这个问题，以便即使在页面初始化时也能触发其中一个事件？

filterChanged = new EventEmitter<boolean>();
paginatorChanged = new EventEmitter<MatPaginator>();
sortChanged = new EventEmitter<{}>();

ngAfterViewInit(): void {
   combineLatest(
      this.paginatorChanged,
      this.sortChanged,
      this.filterChanged
   ).pipe(
      startWith([null, null, null]),
      switchMap(value => {
      const paginator = value[0];
      const sort = value[1];
      const filters = value[2];
    
      return this.service.getFiltered(paginator, sort, filters);
   })).subscribe(data => this.data = data);
}    

applyFilter(): void {
  this.filterChanged.emit(true);
}

onPaginatorChanged(paginator): void {
  this.paginatorChanged.emit(paginator);
}

onSortChanged(sort): void {
  this.sortChanged.emit(sort);
}

谢谢

- AlleXyS

Answer 1

目前问题不是很清楚，但如果你希望在filterChanged可观测对象至少发出一次之前触发combineLatest，那么我认为你使用了错误的startWith运算符。它应该分别传递给每个源可观测对象。

请尝试以下操作：

ngAfterViewInit(): void {
  combineLatest(
    this.paginatorChanged.pipe(startWith(null)),
    this.sortChanged.pipe(startWith(null)),
    this.filterChanged.pipe(startWith(null))
  ).pipe(
    switchMap(value => {
    const paginator = value[0];
    const sort = value[1];
    const filters = value[2];
  
    return this.service.getFiltered(paginator, sort, filters);
    })
  ).subscribe(data => this.data = data);
}

对于本地组播可观察对象，您可以使用 RxJS 的 Subject（或其兄弟姐妹）而不是使用 Angular 特定的 EventEmitter。

- ruth

---

太好了，谢谢。我以为可以在所有事件结果中使用startWith()，但需要为每个事件指定它。这是一次重构，在从智能组件中删除所有过滤器、排序器和分页器后，我将使用Subject更改Events（在服务内部，甚至是ngrx选择器中（因为它已经在应用程序中使用））。非常感谢。 - AlleXyS