angular – 使用异步管道在模板中的多个位置使用相同的observabl

每次使用可观察的$ | async将为给定的observable $创建一个新的订阅(以及一个单独的流) – 如果这个observable包含有大量计算或休息调用的部分，那么这些计算和休息调用将针对每个异步执行 – 所以是的 – 这可以有性能影响。

但是，通过使用.share()扩展您的observable $可以很容易地解决这个问题，在所有订阅者之间拥有一个共享流，并为所有订阅者执行所有这些事情。
不要忘记使用import“rxjs / add / operator / share”添加share-operator;

默认情况下，异步管道不共享订阅的原因只是灵活性和易用性：简单的.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
}