angular - 使用异步管道在模板中的多个位置使用相同的可观察对象的性能

Question

在我的组件模板中，我在两个地方为同一个 Observable 调用 async 管道。

我应该订阅它并在我的模板中使用返回的数组，还是在模板的多个位置对同一个 Observable 使用 async 管道对性能没有负面影响？

Answer 1

每次使用observable$ | async 将为给定的 observable$ 创建一个新的订阅(并因此创建一个单独的流)——如果这个 observable 包含大量计算或 rest-calls 的部分，这些计算和 rest-calls 是为每个 async 单独执行 - 所以是的 - 这可能对性能有影响。

然而，通过使用 .share() 扩展您的 observable$，这可以轻松修复 ，在所有订阅者之间共享一个流，并为所有订阅者执行所有这些事情一次。不要忘记使用 import "rxjs/add/operator/share";

添加 share 运算符

默认情况下异步管道不共享订阅的原因仅仅是灵 active 和易用性:编写一个简单的 .share() 比创建一个全新的流要快得多，后者如果默认情况下共享它们，则将是必需的。

这是一个简单的例子

@Component({
    selector: "some-comp",
    template: `
        Sub1: {{squareData$ | async}}<br>
        Sub2: {{squareData$ | async}}<br>
        Sub3: {{squareData$ | async}}
    `
})
export class SomeComponent {
    squareData$: Observable<string> = Observable.range(0, 10)
        .map(x => x * x)
        .do(x => console.log(`CalculationResult: ${x}`)
        .toArray()
        .map(squares => squares.join(", "))
        .share();  // remove this line and the console will log every result 3 times instead of 1
}