从服务角度 5 设置和获取数据答案

【问题标题】：set and get data from service angular 5从服务角度 5 设置和获取数据
【发布时间】：2025-12-01 10:25:02
【问题描述】：

我正在使用角度 5 我的场景来自一个组件，我正在设置服务中的数据，而另一个组件我正在获取该数据|

组件- 1：

makeUser(row){
  this.agentsService.setSelectedAgentData(row); // setting the data (row) in agentsService.
  const mrf =  this.modalService.open(MakeUserComponent);    
}

服务：在类中声明变量。

public selectedData:any = {};

setter 和 getter 方法如下

  setSelectedAgentData(selectedTableRowData){
    this.selectedData = selectedTableRowData;
  }
  getSelectedAgentData(){
    return this.selectedData;
  }

组件 - 2：

  ngOnInit() {
    this.userDetails = this.agentsService.getSelectedAgentData();
    this.roles = this.agentsService.getRolesList();
  }

当我从组件 -2 调用方法 this.agentsService.getSelectedAgentData() 时，这里 selectedData 值是一个空对象

任何帮助将不胜感激。

【问题讨论】：

可能是因为您是从ngOnInit() 内部调用它的吗？这意味着您在其值从组件 1 更改之前调用它为时过早
尝试登录comp 2的makeUser和ngOnInit。makeUser的登录应该在组件2之前登录
组件2会在this.modalService.open(MakeUserComponent);从组件 1 调用
你确定 component2 是延迟加载的吗？那将是其代码不会立即执行的唯一方法。只需在 component2 的 ngOnInit 中添加 console.log()，以确保您不会太早调用 getSelectedAgentData()...
agentService 在哪里提供？为了让他们共享一个实例，它需要位于正确的 providers 数组中

标签： javascript angular angular2-routing

【解决方案1】：

您可以为此目的使用主题（rxjs 库）。所以 Subject 一方面可以生成数据。另一方面，您可以在任何地方订阅更改。你的服务看起来像这样：

@Injectable()
export class YourService {

  public selectedData: Subject<any>;

  constructor() {
    this.selectedData = new Subject();
  }

  generateSelectedAgentData(row: string) {
    this.selectedData.next(row);
  }
}

在您的第一个组件中：

makeUser(row){
  this.agentsService.generateSelectedAgentData(row);
  const mrf =  this.modalService.open(MakeUserComponent);    
}

在您的第二个组件中：

constructor(private ys: YourService){
  this.ys.selectedData.subscribe(
      data => {
        console.log(data);
        this.userDetails = data;
    });
}

【讨论】：