Angular中调用Subject.next()无法触发subscribe回调问题

核心问题 #

你的组件代码中调用了this.fileService.getFiles()，但FileService中并未实现该方法，这会导致ngOnInit执行时抛出错误，后续的订阅代码根本没机会运行，自然接收不到filesChanged的通知。

同时也需要确认组件订阅操作的时机是否在setFiles调用之前（只要组件正常初始化完成，后续调用setFiles就应该触发订阅）。

解决步骤 #

1. 在FileService中补充getFiles方法
   给服务添加getFiles方法，返回文件数组的副本（避免外部直接修改服务内的原数组）：

   @Injectable({ providedIn: 'root' })
   export class FileService {
       private localfiles: UploadedFile[] = [new UploadedFile('asdasd', 'sdfsdfsd', false, 1, 2, 'dsfsf')];
   
       filesChanged = new Subject<UploadedFile[]>();
   
       constructor() {}
   
       // 新增getFiles方法
       getFiles(): UploadedFile[] {
           return this.localfiles.slice();
       }
   
       setFiles(file: UploadedFile) {
           this.localfiles.push(file);
           console.log(this.localfiles);
           this.filesChanged.next(this.localfiles.slice());
           console.log('after');
       }
   }
   

2. 检查控制台错误
   打开浏览器开发者工具控制台，确认是否存在其他报错导致订阅逻辑中断，如有则优先修复这些问题。

3. 可选：给订阅添加错误处理
   为订阅增加错误回调，方便排查潜在问题：

   ngOnInit(): void {
       this.files = this.fileService.getFiles();
       this.fileService.filesChanged.subscribe({
           next: (files: UploadedFile[]) => {
               console.log('received files update');
               this.files = files;
           },
           error: (err) => console.error('订阅出错:', err)
       });
   }
   

4. 可选：改用BehaviorSubject（按需）
   如果需要让新订阅的组件直接获取最新文件数组，可将Subject替换为BehaviorSubject，它会保存当前最新值，新订阅者订阅时会立即收到该值：

   // 修改服务中的filesChanged定义
   filesChanged = new BehaviorSubject<UploadedFile[]>(this.localfiles.slice());
   
   // setFiles方法保持不变
   setFiles(file: UploadedFile) {
       this.localfiles.push(file);
       this.filesChanged.next(this.localfiles.slice());
   }
   

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