Angular组件间通过Service传递表单数据失败求助

1. 检查Service是否为单例模式 #

Angular中若在组件的providers数组重复声明Service，会导致每个组件拥有独立实例，数据无法共享。确保Service采用单例注入：

@Injectable({
  providedIn: 'root' // Angular 6+推荐的单例方式，无需在模块providers中声明
})
export class DataShareService {}

2. 确认Service的响应式传递机制 #

直接用变量存储数据无法触发组件更新，必须用BehaviorSubject/Subject实现响应式数据流：

import { BehaviorSubject } from 'rxjs';

export class DataShareService {
  // 用BehaviorSubject保存初始值，确保订阅者能拿到最新数据
  private concaInputSource = new BehaviorSubject<any>(null);
  // 对外暴露Observable，避免外部直接修改数据源
  concaInput$ = this.concaInputSource.asObservable();

  setConcaInput(data: any) {
    this.concaInputSource.next(data);
  }
}

3. 验证Devis组件是否正确触发数据传递 #

确保表单数据就绪后，调用Service的setConcaInput方法：

// Devis组件代码示例
constructor(private dataShareService: DataShareService) {}

onFormSubmit() {
  // 确认表单数据已赋值给this.concaInput
  this.concaInput = this.devisForm.value;
  // 调用Service传递数据
  this.dataShareService.setConcaInput(this.concaInput);
}

4. 检查Home组件的订阅逻辑 #

Home组件必须订阅Service的Observable才能获取实时数据，不能直接读取变量：

// Home组件代码示例
import { Subscription } from 'rxjs';

concaInput: any;
private subscription!: Subscription;

constructor(private dataShareService: DataShareService) {}

ngOnInit() {
  // 订阅数据流，接收Devis组件传递的数据
  this.subscription = this.dataShareService.concaInput$.subscribe(data => {
    if (data) {
      this.concaInput = data;
    }
  });
}

// 组件销毁时取消订阅，避免内存泄漏
ngOnDestroy() {
  this.subscription.unsubscribe();
}

5. 排查数据传递时机 #

若Home组件在Devis组件传递数据前已初始化，直接读取Service变量只会拿到初始值，必须通过订阅监听后续变化。同时检查路由跳转时Home组件是否重新初始化，确保订阅逻辑在ngOnInit中执行。

6. 确认表单数据封装正确性 #

在Devis组件调用Service方法前，通过console.log(this.concaInput)打印验证，确保表单数据已正确赋值。

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