Angular2 +异步管道：从单个Observale获取多个值

Question

我有一个Service，它返回一个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));
  }
}

结果看起来很好，但我使用async管道4次。 其中（据我所知）将导致4个订阅。 根本不应该这是必要的（？）

---

当然，我可以在MyComponent的constructor中手动订阅，然后在没有async管道的情况下生存。 但是我必须要照顾自己取消订阅。

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

Answer 1

假设myService.getFoos()里面的某个地方使用了share()运算符，那么你正在做的事情没有错，所以你的所有async管道共享相同的源订阅。 如果您在此示例中使用BehaviorSubject ，那么您没问题。

你提到的关于在构造函数中订阅自己的内容是我立刻想到的。 我不认为手动取消订阅是一个问题。