Angular 5：父组件Observable值传递给子组件时出现undefined问题

看起来你遇到的是典型的Observable订阅时机+Subject特性导致的问题，我来帮你拆解原因和解决方案：

问题分析 #

你的代码里用了Subject来传递用户数据，但Subject有个关键特性：它不会保存历史发射的值。如果子组件在父组件调用setUsuario之后才完成初始化并订阅这个Subject，那子组件就会错过之前发送的值，拿到的自然是undefined。另外还要确认你的服务是不是单例——如果父组件和子组件拿到的是服务的不同实例，那数据肯定没法共享。

解决方案 #

1. 把Subject换成BehaviorSubject #

BehaviorSubject会保存最新的发射值，任何新订阅的观察者都会立即收到这个最新值，完美解决订阅时机滞后的问题。修改你的Observable服务：

@Injectable({ providedIn: 'root' }) // 用providedIn: 'root'确保服务是全局单例
export class ObservableUsuario implements ObservableUtil { 
  // 初始化BehaviorSubject时可以设置一个默认值（比如null）
  private usuarioSubject = new BehaviorSubject<any>(null); 
  // 对外暴露只读的Observable，避免外部直接调用next方法
  usuario$ = this.usuarioSubject.asObservable();

  setUsuario(variable: any) { 
    this.usuarioSubject.next({ text: variable }); 
  } 

  clearUsuario() { 
    this.usuarioSubject.next(null); 
  }

  // 可选：如果需要同步获取当前值，可以加这个方法（但建议优先用订阅）
  getCurrentUsuario() {
    return this.usuarioSubject.value;
  }
}

2. 子组件正确订阅Observable #

子组件尽量在ngOnInit生命周期钩子中订阅，而不是构造函数，确保组件初始化完成后再监听数据：

import { OnInit } from '@angular/core';

export class ChildComponent implements OnInit {
  usuario: any;

  constructor(private usuarioService: ObservableUsuario) {}

  ngOnInit() {
    // 订阅用户数据
    this.usuarioService.usuario$.subscribe({
      next: (userData) => {
        this.usuario = userData;
        // 这里可以处理拿到的数据，比如渲染到模板
        console.log('子组件获取到的用户数据：', this.usuario);
      },
      error: (err) => console.error('获取用户数据出错：', err)
    });
  }
}

3. 确保服务是单例 #

一定要确认你的服务是全局提供的：要么在@Injectable里加providedIn: 'root'，要么在根模块的providers数组里声明。如果是在组件的providers里声明的，每个组件都会创建新的服务实例，数据就没法共享了。

额外提醒 #

• 记得在组件销毁时取消订阅，避免内存泄漏：可以用takeUntil操作符或者手动调用unsubscribe。
• 模板里也可以直接用async管道订阅，这样Angular会自动帮你管理订阅和取消订阅：

  <div *ngIf="usuarioService.usuario$ | async as usuario">
    用户名称：{{ usuario.text }}
  </div>
  

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