Angular 8组件间数据共享问题：使用服务传递数据失效

我来帮你排查下这个问题～你用BehaviorSubject实现组件间数据共享的思路是完全正确的，现在没生效大概率是Header组件没有正确订阅服务的数据流，导致Body组件更新数据后，Header接收不到变化。

第一步：给Header组件添加订阅逻辑 #

你需要在Header组件里注入CommonService，并在组件初始化时订阅currentMessage这个Observable，这样每次数据更新时，Header的本地数据才会同步更新。示例代码如下：

// header.component.ts
import { Component, OnInit } from '@angular/core';
import { CommonService } from '../common.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent implements OnInit {
  details: any; // 用来存储从服务获取的详情数据

  constructor(private data: CommonService) { }

  ngOnInit(): void {
    // 订阅服务的消息流，每次数据变化时更新本地details
    this.data.currentMessage.subscribe(updatedDetails => {
      this.details = updatedDetails;
    });
  }
}

然后在Header的模板里绑定这个details数据，比如：

<!-- header.component.html -->
<div>
  ID: {{ details?.id }} <br>
  Name: {{ details?.name }}
</div>

第二步：确保服务是单例模式 #

Angular中如果服务不是单例，不同组件注入的会是不同实例，数据自然没法共享。你可以修改CommonService的@Injectable装饰器，用providedIn: 'root'让它成为应用级单例：

// common.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root' // 这行确保服务是单例
})
export class CommonService {
  private details = { id:'12345', name:'Victor' };
  private messageSource = new BehaviorSubject(this.details);
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: any) {
    this.messageSource.next(message);
  }
}

第三步：确认Body组件的调用逻辑 #

你的Body组件代码是没问题的，但要确保已经正确注入了CommonService：

// body.component.ts
import { Component } from '@angular/core';
import { CommonService } from '../common.service';

@Component({
  selector: 'app-body',
  templateUrl: './body.component.html'
})
export class BodyComponent {
  details: any;

  constructor(private data: CommonService) { }

  change(){
    this.details = { id:"45673", name:"Micheal" }
    this.data.changeMessage(this.details);
  }
}

做完这几步，点击“修改头部详情”按钮后，Header组件里的id和name应该就能正常更新了～

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