Почему асинхронный канал, который подписан на объединенную наблюдаемую, переопределяет ранее выданное значение?

Question

У меня есть наблюдаемая, которая объединена из двух наблюдаемых.Я использую это наблюдаемое, чтобы передать его через асинхронный канал дочернему компоненту.Когда испускаются две внутренние наблюдаемые, последние излучаемые значения переопределяются более новыми значениями.

let a = new Subject();
let b = new Subject();
this.loaderData$ = merge(a.asObservable(), b.asObservable())
setTimeout(() => {
    b.next(2);
    a.next(1);
}, 1000)

let a = new Subject();
let b = new Subject();
this.loaderData$ = merge(a.asObservable(), b.asObservable())
setTimeout(() => {
    b.next(2);
    setTimeout(() => { a.next(1) }, 1000)
}, 1000)

html:

<ts-loader [loaderData]="loaderData$ | async"></ts-loader>

@Component({
  selector: 'ts-loader',
  templateUrl: './ts-loader.component.html',
  styleUrls: ['./ts-loader.component.scss']
})
export class TsLoaderComponent {

  @Input()
  set loaderData(loaderData:any){
    console.log(loaderData)
}

Наблюдаемые loaderData $ передаются дочернему компоненту через асинхронный канал.Но первая часть кода вводит только 1, чтобы быть дочерним компонентом, тогда как вторая часть кода вводит и 1 и 2.

Я не могу понять, почему эти наблюдаемые работают так.

ps: у меня есть обходной путь, чтобы подписаться на наблюдаемый внутри дочернего компонента и получить ожидаемые результаты.Но я хотел, чтобы он работал с асинхронными каналами.

Answer 1

Это, вероятно, уже произошло в вашем асинхронном канале, асинхронный канал отображает на экране только самый последний результат, поэтому ваша 1 перезаписывает 2. Для проверки места tap

let a = new Subject();
let b = new Subject();
this.loaderData$ = merge(a.asObservable(), b.asObservable()).pipe(tap(console.log))

setTimeout(() => {
    b.next(2);
    a.next(1);
}, 1000)