使用异步管道在模板中的多个位置使用相同的observable的性能

Question

在我的组件模板中,我async在2个位置调用相同Observable的管道.

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

Answer 1

每次使用observable$ | async都会创建一个新的订阅(以及一个单独的流)到给定的observable$- 如果这个observable包含重度计算或休息调用的部分,那些计算和休息调用将分别为每个执行async- 所以是 - 这可以有性能影响.

然而,这是很容易固定延长你observable$用.share(),让所有用户之间共享的数据流,并为所有用户执行所有这些事情只有一次.不要忘记添加share-operatorimport "rxjs/add/operator/share";

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

Answer 2

避免多个订阅的另一种方法是使用包装*ngIf="obs$ | async as someName".使用olsn的例子

    @Component({
        selector: "some-comp",
        template: `
          <ng-container *ngIf="squareData$ | async as squareData">
            Sub1: {{squareData}}<br>
            Sub2: {{squareData}}<br>
            Sub3: {{squareData}}
          </ng-container>`
    })
    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(", "));

    }

它也很酷,因为它也清除了模板.