Angular非父子组件间数组数据传递问题求助

问题描述 #

作为Angular新手，在实现「选中第一个组件表格行后，打开新视图展示选中行数据」的需求时，尝试了两种非父子组件数组传递方案均失败，调试时确认第一个组件中tasks[]已正确填充，但新视图组件无法获取数据。

第一种方案错误分析与修复 #

原代码问题点 #

1. TaskService未触发数据推送：saveData方法获取到后端返回的data后，仅赋值给this.retryTasks，但从未调用setTasks方法将数据发送到tasksSubject，导致订阅data$的第二个组件接收不到数据。
2. MatTableDataSource赋值错误：第二个组件直接将订阅到的data赋值给dataSource实例，但MatTableDataSource需要更新data属性，而非直接替换实例。

修复后代码 #

TaskService修正

public tasksSubject = new BehaviorSubject<Task[]>([]);
data$ = this.tasksSubject.asObservable();

constructor(private dataService: DataService) {}

public saveData(taskids: number[]){
    this.dataService.getTasks(taskids).subscribe((data) => {
      this.retryTasks = data;
      // 新增：调用setTasks推送数据到Subject
      this.setTasks(data);
    });
}

setTasks(tasks: Task[]) {
    this.tasksSubject.next(tasks);
}

第二个组件修正

dataSource = new MatTableDataSource<Task>([]);

constructor(private taskService: TaskService) {
    this.taskService.data$.subscribe(data => {
      // 更新MatTableDataSource的data属性，而非替换实例
      this.dataSource.data = data;
    });
}

第二种方案错误分析与修复 #

原代码问题点 #

1. 组件引用错误：第二个组件中错误引用了this.dataService.acceptedArraySubject，但acceptedArraySubject是定义在TaskService中的，应该从taskService获取。
2. 未订阅Subject：仅调用pipe(share())但未订阅，无法触发数据接收逻辑，也未将数据绑定到表格数据源。

修复后代码 #

第二个组件修正

dataSource = new MatTableDataSource<Task>([]);

constructor(private taskService: TaskService) {
    // 从taskService获取subject并订阅，更新数据源
    this.taskService.acceptedArraySubject.subscribe(items => {
      this.dataSource.data = items;
    });
}

额外注意事项 #

• 确保Service是单例：Angular中Service默认是根注入器单例，若手动指定了providedIn，需确保两个组件使用的是同一个Service实例，否则Subject无法跨组件通信。
• 避免内存泄漏：组件销毁时需取消订阅Subject，可通过takeUntil操作符结合ngOnDestroy实现：

  private destroy$ = new Subject<void>();
  
  ngOnInit() {
    this.taskService.data$
      .pipe(takeUntil(this.destroy$))
      .subscribe(data => this.dataSource.data = data);
  }
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
  

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