Angular中如何在父组件创建的共享Observable上触发事件

• 普通Observable是只读的流，仅支持订阅消费，没有主动发射事件的能力，你代码里调用的raiseEvent也不是RxJS提供的原生API，这是你最大的理解偏差。
• 要实现「多生产者、多消费者」的事件通信，你需要用RxJS的Subject，它同时实现了Observable和Observer接口，既可以被订阅，也可以主动调用next()方法发射事件。

步骤1：父组件定义共享Subject #

父组件创建Subject实例，作为全局事件总线传递给所有子组件实例：

// 父组件ts
import { Subject } from 'rxjs';

@Component({
  selector: 'app-parent',
  template: `
    <!-- 两个子组件传入同一个Subject实例 -->
    <app-report-uploader [newUploadStarted$]="newUploadStarted$"></app-report-uploader>
    <app-report-uploader [newUploadStarted$]="newUploadStarted$"></app-report-uploader>
  `
})
export class ParentComponent {
  // 如果不需要传递事件参数用void即可，需要传值则改为对应类型如Subject<number>
  public newUploadStarted$ = new Subject<void>();
}

步骤2：子组件适配逻辑 #

修改子组件的输入类型，同时添加订阅逻辑接收事件、调用next发射事件：

// 子组件ts
import { Subject, Subscription } from 'rxjs';

export class ReportUploaderComponent implements OnInit, OnDestroy {
    @Input() newUploadStarted$: Subject<void>;
    // 存储订阅引用，用于销毁时取消订阅避免内存泄漏
    private eventSub: Subscription;

    ngOnInit() {
      // 订阅全局上传事件，触发时清除自身旧消息
      this.eventSub = this.newUploadStarted$.subscribe(() => {
        // 此处替换为你的实际清除逻辑
        this.clearOldUploadMessages();
      });
    }

    onChooseBlueReportFile(files: FileList) {
        // 发射事件，所有子组件的订阅都会触发
        this.newUploadStarted$.next();
        // 后续你自己的文件上传逻辑
    }

    private clearOldUploadMessages() {
      // 示例逻辑：清空错误提示、重置已选文件列表等
      // this.uploadErrorMsg = '';
      // this.selectedFile = null;
    }

    ngOnDestroy() {
      this.eventSub?.unsubscribe();
    }
}

如果你的项目对代码规范要求更高，不建议子组件直接持有Subject引用修改，可调整为单向数据流模式：

1. 父组件将Subject拆分为「私有发射源+公有只读Observable」
2. 子组件通过Output向父组件发射触发请求，父组件统一调用next发事件
   这个方案避免了子组件随意修改共享流，可维护性更强。

内容的提问来源于stack exchange，提问作者Woodsman