Angular如何通过Observable实现组件间传值并在第二个组件模板展示

云原生阿岚

2026-9-30

问题原因及解决方案

你遇到的问题主要由3个可修复的错误导致，按优先级修改即可：

1. 修正服务代码的语法&逻辑问题

你定义getDataObject方法时多写了一个无用的入参obj，调用时没传参会导致隐式报错；同时普通Subject存在时序问题：如果子组件是在点击事件触发后才初始化，会收不到之前发送的数值，建议替换为BehaviorSubject（带初始值，新订阅者能拿到最近一次发送的值）：

@Injectable({
  providedIn: 'root'
})
export class Service{
  // 替换为BehaviorSubject，初始值设为null，你也可以根据业务调整初始值
  private subject = new BehaviorSubject<any>(null);

  setDataObject(obj) { 
    this.subject.next(obj) 
  }

  // 移除无用的入参obj
  getDataObject(): Observable <any> {
    return this.subject.asObservable();
  }
}

注意这里返回asObservable()是最佳实践，避免外部组件直接调用subject的next方法修改数值。

2. 子组件订阅逻辑无需修改

你现在用`async`管道绑定Observable的写法符合Angular最佳实践，不需要改成手动订阅存变量的写法，无需调整。

3. 修正模板的展示写法

直接把对象放在插值表达式里会默认输出[object Object]，你可以用json管道打印完整对象结构，或者访问对象的具体属性展示，推荐搭配*ngIf别名写法避免多次调用async管道：

<!-- 写法1：直接展示完整对象或单个属性 -->
<div>完整对象 = {{ displayObservable$ | async | json }}</div>
<div>对象属性示例 = {{ (displayObservable$ | async)?.yourPropName }}</div>

<!-- 写法2：推荐，用别名复用async管道的结果，代码更简洁 -->
<div *ngIf="displayObservable$ | async as data">
  <p>完整对象：{{ data | json }}</p>
  <p>属性1：{{ data.prop1 }}</p>
  <p>属性2：{{ data.prop2 }}</p>
</div>