在 Angular 7 中,HTTP 回调是异步执行的,因此无法直接读取外部的公共变量。解决这个问题的一种方法是使用 rxjs
的 Subject
或 BehaviorSubject
。
下面是一个使用 BehaviorSubject
的示例代码:
data.service.ts
的服务文件,并导入 BehaviorSubject
和 Observable
:import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private myData = new BehaviorSubject(null);
constructor() { }
getData(): Observable {
return this.myData.asObservable();
}
updateData(data: any): void {
this.myData.next(data);
}
}
DataService
,并在回调中调用 updateData()
方法更新数据:import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-my-component',
template: `...`,
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
constructor(private dataService: DataService) { }
getDataFromHttp(): void {
// 假设这里是一个 HTTP 请求
this.http.get('https://api.example.com/data').subscribe(response => {
// 处理 HTTP 回调的响应数据
const data = response.data;
// 将数据传递给其他组件
this.dataService.updateData(data);
});
}
}
DataService
,并通过订阅 getData()
方法来获取更新的数据:import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-another-component',
template: `...`,
styleUrls: ['./another-component.component.css']
})
export class AnotherComponent implements OnInit {
data: any;
constructor(private dataService: DataService) { }
ngOnInit(): void {
this.dataService.getData().subscribe(data => {
this.data = data;
});
}
}
通过这种方法,您可以在 HTTP 回调中更新数据,并在其他组件中订阅更新的数据。这样就可以解决 Angular 7 中无法读取公共变量的问题。