4

我有一个服务，它返回一个 Observable。现在我正在寻找正确/最有效的方法来从此 Observable 获得多个结果，而无需编写太多代码。

  • MyService返回一个Observable<Array<Foo>>

  • MyComponent调用myService.getFoos()并应输出数组的前 5 个元素、数组的总长度以及未显示的元素数。

这是我当前的代码：

@Injectable()
export class MyService {
  foos = new BehaviorSubject<Array<Foo>>([]);

  getFoos() {
    return this.foos.asObservable();
  }
}



@Component({
  template: `
    Total: {{ totalCount | async }}
    Omitted: {{ (totalCount | async) - (maxFiveItems | async).length }}
    <div *ngFor="let item of maxFiveItems | async">
      {{item.bar}}
    </div>
  `
})
export class MyComponent {
  totalCount: Observable<number>;
  maxFiveItems: Observable<Array<Foo>>;

  constructor(myService:MyService) {
    this.totalCount = myService.getFoos()
        .map(arr => arr.length);

    this.maxFiveItems = myService.getFoos()
        .map(arr => arr.slice(0, 5));
  }
}

结果看起来不错，但我使用了async4 次管道。其中（据我所知）将导致 4 个订阅。我猜这根本没有必要（？）

当然，我可以在constructorof 中手动订阅MyComponent，然后在没有async管道的情况下生活。但后来我必须照顾自己退订。

有没有其他方法来处理这个？

4

1 回答 1

4

假设myService.getFoos()内部某处使用share()运算符，那么您所做的事情没有任何问题，因此您的所有async管道都共享对源的相同订阅。如果你BehaviorSubject在这个例子中使用，那么你很好。

你提到的在构造函数中订阅自己是我立即想到的。不过，我不认为手动取消订阅是个问题。

于 2017-01-16T10:37:55.137 回答