Angular 2 + 异步管道:从单个 Observable 获取多个值

Angular2 + async pipe: Get multiple values from a single Observale

我有一个服务,returns 一个 Observable。现在我正在寻找正确/最有效的方法来从这个 Observable 中获取多个结果而无需编写太多代码。

这是我当前的代码:

@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 个订阅。我猜这完全没有必要 (?)


当然,我可以在 MyComponentconstructor 范围内手动订阅,然后在没有 async 管道的情况下生活。但是我必须自己取消订阅。

还有其他方法可以解决这个问题吗?

假设 myService.getFoos() 内部某处使用 share() 运算符,那么您所做的事情没有任何问题,因此您所有的 async 管道都共享对源的相同订阅。如果您像本示例中那样使用 BehaviorSubject,那么就没问题。

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