Angular 5中BehaviorSubject组件间共享对象数据为空问题

我一眼就发现了几个关键问题，咱们逐个拆解解决：

1. 服务实例不统一（最核心问题） #

在option-post-choix.component.ts里，你手动创建了服务实例：

private dataTrans: OptionDataService = new OptionDataService;

但Angular的依赖注入机制要求通过构造函数注入服务，才能保证全应用共享同一个服务实例。你手动new的这个实例，和option-post.component.ts里通过DI拿到的实例是完全独立的两个对象，数据自然没法传到正确的服务里！

修复方法：
把option-post-choix.component.ts里的服务初始化改成构造函数注入，删掉手动实例化的代码：

constructor(private location: Location, private dataTrans: OptionDataService) { }

2. 异步订阅的日志时机错误 #

在option-post.component.ts的ngOnInit里，你在订阅后立刻打印this.option_select：

ngOnInit() {
  this.data.getData$.subscribe(option_select => this.option_select = option_select);
  console.log('recv', this.option_select); // 这里会先执行，所以显示空数组
}

subscribe的回调是异步执行的，当你调用console.log时，回调还没触发，this.option_select还是初始值。

修复方法：
把日志放到回调函数内部，确保拿到最新数据：

ngOnInit() {
  this.data.getData$.subscribe(option_select => {
    this.option_select = option_select;
    console.log('recv', this.option_select); // 现在能输出正确数据了
  });
}

3. 模板变量名拼写错误 #

在option-post.component.html里，你用了options_select，但组件里的变量名是option_select（多了一个s）：

<div class="option_box" *ngFor="let opt of options_select">

修复方法：
把模板里的变量名和组件保持一致：

<div class="option_box" *ngFor="let opt of option_select">

修复后验证 #

完成以上修改后：

• 选择选项点击确认时，数据会通过同一个服务实例传递
• option-post.component能正确接收并更新数据
• 模板会正常渲染出选中的选项

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