Angular中使用SharedService无法在组件间传递数据

看起来你遇到了Angular共享服务跨组件传数据的常见坑，我来帮你排查下问题并给出解决方案：

1. 先确保你的共享服务是单例实例 #

Angular中如果服务没有指定providedIn: 'root'，很可能会在不同组件的注入器中创建多个实例，导致数据无法共享。修改你的服务代码：

@Injectable({
  providedIn: 'root' // 关键：将服务注册为根级单例
})
export class SharedService{
  myData;
  constructor(){
    this.myData= {};
  }
  setMyData(val: object){
    this.myData= val;
  }
  getMyData(){
    return this.myData;
  }
}

2. 确认数据设置的时机正确 #

在DialogOverviewExample组件中，一定要在打开对话框之前调用setMyData，否则对话框初始化时数据还没被设置：

// 假设你打开对话框的方法是这样的
openDialog(): void {
  // 先把数据存入共享服务
  this.sharedService.setMyData(this.result);
  
  // 再打开对话框
  const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
    // 这里的data可以不用传，我们用共享服务取数据
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('对话框已关闭');
  });
}

3. 在对话框组件中正确获取数据 #

在DialogOverviewExampleDialog组件里，不要在构造函数里急于获取数据（此时可能还没被设置），改用ngOnInit生命周期钩子，同时确保正确注入服务：

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared.service'; // 注意路径要和你的文件结构匹配

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: './dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog implements OnInit {
  receivedData: any;

  constructor(private sharedService: SharedService) {}

  ngOnInit(): void {
    // 组件初始化时从服务获取数据
    this.receivedData = this.sharedService.getMyData();
    console.log('收到的数据：', this.receivedData);
  }
}

额外检查点 #

• 确认SharedService的导入路径正确，不要出现文件路径错误导致注入失败
• 如果没用providedIn: 'root'，要确保在你的根模块（比如AppModule）的providers数组中添加了SharedService

按照这几步调整后，应该就能成功获取到数据啦！

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