如何在 Angular Rxjs 中的订阅方法的值中将值设置为 globle 变量

Question

我想知道如何从subscribe方法中取出值，并将其设置为全局变量。所以我可以在我的打字文件的任何地方使用它

constructor(
private VNFCInstanceServicesService: VNFCInstanceServicesService,
) {
this.siteId = this.route.snapshot.queryParams.siteId;
this.vnfInsId = this.route.snapshot.queryParams.vnfInstanceId;
this.VNFCInstanceServicesService.filterVnfciServices(
this.vnfInsId,
this.siteId,
0
).subscribe((data) => {
this.source.load(data.payload.records);
});
}

我需要把这个(data.epayload.records(作为一个全局变量值

Answer 1

我认为学习如何设计一个可观察的流，它可以准确地发出您需要的数据，这对您非常有帮助。一般来说，当有最少数量的订阅和本地命令时，代码要简单得多；状态"；变量。

而不是这样做：

class SomeComponent {
private siteId;
private vnfInsId;

constructor(
private route: ActivatedRoute,
private service: VNFCInstanceServicesService
) {
this.siteId = this.route.snapshot.queryParams.siteId;
this.vnfInsId = this.route.snapshot.queryParams.vnfInstanceId;
this.service.filterVnfciServices(
this.vnfInsId,
this.siteId,
0
).subscribe((data) => {
this.source.load(data.payload.records);
});
}
}

您只能处理可观察性。RxJS提供了许多运算符和静态函数，允许您从彼此构建可观察的流。

class SomeComponent {
private siteId$   = this.route.paramMap.pipe(map(params => params.get('siteId')));
private vnfInsId$ = this.route.paramMap.pipe(map(params => params.get('vnfInstanceId')));
public records$  = combineLatest([this.siteId$, this.vnfInsId$]).pipe(
switchMap(([siteId, vnfInsId]) => this.service.filterVnfciServices(vnfInsId, siteId, 0)),
switchMap(data => this.source.load(data.payload.records))
);
constructor(
private route: ActivatedRoute,
private service: VNFCInstanceServicesService
) { 
this.records$.subscribe(
records => console.log('records: ', records)
)
}
}

使用的操作员：

• map用于siteId$和vnfInsId$的定义，以简单地从路由的参数映射返回相关密钥
• combineLatest获取多个可观测源，并在其中任何一个发射时发射包含其最新值的数组
• CCD_ 5接收CCD_；内部可观察的"；从您对filterVnfciServices()的呼叫。它将从这个"this"订阅一个发射值；内部可观察">
• 第二个switchMap接收来自filterVnfciServices()的发射，并使用它来调用source.load()，然后发射该结果

这种反应式方法的巧妙之处在于，每当任何源发出新值时，依赖于它们的可观察性都会自动接收更新的值。

我承认，除非你对这些函数/运算符的工作方式有了深刻的理解，否则使用完全反应式代码的价值不会完全实现，但一旦你做到了……代码就会变得更加简洁。

Answer 2

由于您处于一个类的上下文中(根据显示的构造函数判断(，您也可以在该对象上添加一个属性，然后为其赋值：

...
private records: any;
constructor(
private VNFCInstanceServicesService: VNFCInstanceServicesService,
) {
this.siteId = this.route.snapshot.queryParams.siteId;
this.vnfInsId = this.route.snapshot.queryParams.vnfInstanceId;
this.VNFCInstanceServicesService.filterVnfciServices(
this.vnfInsId,
this.siteId,
0
).subscribe((data) => {
this.source.load(data.payload.records);
this.records = data.payload.records;
});
}
private randomFn() {
// can access your data here
console.log(this.records);
}

这将使记录在类的上下文中可用，如果您在其他地方需要，可以在类实例上公开它。或者，您也可以将其设置在全局对象上，这是不鼓励的，并且会导致很多问题。