Angular Rxjs中如何将Subscribe方法返回值赋值给全局变量

实现方案 #

1. 仅当前TS文件/组件内全局可用 #

• 第一步：在当前类的构造函数外部声明类成员属性

// 建议替换为你records数组元素的实际类型，更符合TypeScript类型规范
public vnfciRecords: Array<YourRecordType> = [];
// 暂不确定类型时可先用any[]过渡
// public vnfciRecords: any[] = [];

constructor(
    private VNFCInstanceServicesService: VNFCInstanceServicesService,
    private route: ActivatedRoute // 注意原有代码漏了route的注入，记得补上
) {
    this.siteId = this.route.snapshot.queryParams.siteId;
    this.vnfInsId = this.route.snapshot.queryParams.vnfInstanceId;
    // 原有请求逻辑
}

• 第二步：在subscribe的成功回调中给声明的属性赋值
  修改原有subscribe部分代码：

this.VNFCInstanceServicesService.filterVnfciServices(
    this.vnfInsId,
    this.siteId,
    0
).subscribe((data) => {
    this.source.load(data.payload.records);
    // 赋值给类全局属性
    this.vnfciRecords = data.payload.records;
    // 需要依赖该数据执行的逻辑可在这里调用，避免异步时序问题
    this.handleRecordsAfterLoad();
});

注意：接口请求是异步操作，vnfciRecords只有在请求成功返回后才会有实际值，在请求未完成的同步阶段（比如构造函数、ngOnInit的同步代码中）访问该变量会拿到初始的空数组，使用前建议加非空判断。

2. 全应用多文件跨组件全局可用 #

如果需要在整个应用的任意TS文件中都能访问该数据，可以把值存入公共共享服务：

• 先在你的公共共享服务中声明全局存储属性

// 共享服务文件中定义
public globalVnfciRecords: any[] = [];

• 在subscribe回调中给服务的属性赋值

// 先在当前组件的构造函数中注入你的共享服务
constructor(
    private VNFCInstanceServicesService: VNFCInstanceServicesService,
    private commonService: CommonService, // 你的共享服务
    private route: ActivatedRoute
) {}

// subscribe内赋值
.subscribe((data) => {
    this.commonService.globalVnfciRecords = data.payload.records;
})

其他组件/文件注入该共享服务，即可直接访问commonService.globalVnfciRecords拿到数据。

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