Angular组件输出Observable触发RxJs错误：期望流却传入undefined

错误根源 #

1. 缺失输入属性声明：子组件中resetScore$依赖的this.resetScore未声明为@Input()，导致父组件传入的matchStart$无法绑定，this.resetScore值为undefined。当RxJs尝试对undefined调用.pipe()或合并流时，触发报错。
2. 控制台能打印输出是因为score流的startWith(0)先执行，但后续流操作依赖未定义的resetScore时抛出错误。

修复步骤 #

1. 补充输入属性声明 #

在子组件中添加resetScore的@Input()声明，确保父组件的输入能正确绑定：

@Input() resetScore: Observable<any>;

2. 优化流的容错处理（可选） #

为避免类似问题，可在合并流时增加容错逻辑，防止传入非流对象：

import { EMPTY } from 'rxjs';

// 修改actionHistory$的merge部分
actionHistory$ = defer(() => merge(
    this.addToScore$,
    this.undoAction$,
    this.resetScore$ ? this.resetScore$ : EMPTY // 若resetScore$未初始化，用EMPTY替代
  ).pipe(
    scan((state, fn) => fn(state), []),
    startWith([])
  )
);

修正后的子组件核心代码 #

import { Component, Input, Output } from '@angular/core';
import { defer, merge, scan, map, startWith, tap, EMPTY } from 'rxjs';
import { Subject } from 'rxjs';

@Component({
  // ... 组件元数据
})
export class PlayerScoreComponent {
  @Input() resetScore: Observable<any>; // 新增输入属性
  @Output() score = defer(() => this.actionHistory$
    .pipe(
      map((actionHistory: Array<number>) => actionHistory.reduce((prev, next) => prev + next, 0)),
      startWith(0),
      tap(val => console.log(val)),
      tap(val => this.currentScore = val)
    )
  );

  ballClick$ = new Subject<number>();
  undoClick$ = new Subject<any>();
  currentScore = 0;
  
  addToScore$ = defer(() => merge(this.ballClick$, this.deadBallsAfterNine)
    .pipe(
      map((next) => (state) => [...state, next])
    )
  );
  resetScore$ = defer(() => this.resetScore
    .pipe(
      map(() => (_) => [])
    )
  );
  undoAction$ = this.undoClick$
    .pipe(
      map(() => (state: Array<number>) => state.slice(0, -1))
    );

  actionHistory$ = defer(() => merge(
      this.addToScore$,
      this.undoAction$,
      this.resetScore$ ? this.resetScore$ : EMPTY
    ).pipe(
      scan((state, fn) => fn(state), []),
      startWith([])
    )
  );
}

额外说明 #

虽然Angular允许用Observable直接作为@Output（与EventEmitter结构兼容），但建议优先使用EventEmitter（本质是Observable的子类），更符合Angular的组件设计规范，也能避免潜在的初始化顺序问题。

内容的提问来源于stack exchange，提问作者R. Salisbury