угловая асинхронная труба, наблюдаемая в нескольких местах, запрашивается много раз

Question

Код, подобный этому вопросу Производительность использования одного и того же наблюдаемого в нескольких местах в шаблоне с асинхронным каналом

Но не работает ли в rxjs6?

https://stackblitz.com/edit/angular-shared-fail

import { Component, Input } from '@angular/core';
import {Observable, of, range, zip} from 'rxjs';
import {filter, map, share, switchMap, tap, toArray} from 'rxjs/operators';

@Component({
    selector: "some-comp",
    template: `
        Sub1: {{squareData$ | async}}<br>
        Sub2: {{squareData$ | async}}<br>
        Sub3: {{squareData$ | async}}
    `
})
export class HelloComponent {
  squareData$: Observable<string> = range(0, 10).pipe(
    map(x => x * x),
    tap(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
  );
}

Каждый номер журнала 3 раза. Ожидается один раз.

Answer 1

Вы трижды обматываете наблюдаемое, отсюда три распечатки. Пусть ваш шаблон HomeComponent будет таким, как показано ниже, и вы увидите желаемый результат.

  <div *ngIf="(squareData$ | async) as squares">
    Sub1: {{squares}} <br/>
    Sub2: {{squares}} <br/>
    Sub3: {{squares}}
  </div>