您可以通过使用Observables来解决这个问题。将您的服务返回的HTTP响应转换为一个Observable,然后订阅它以更新您的组件。这样,您就可以在获取数据后立即更新屏幕。
以下是一个示例代码,演示如何使用Observables从服务中获取数据并将其传递给组件:
在服务中:
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Injectable()
export class DataService {
private dataUrl = 'api/data';
constructor(private http: HttpClient) {}
getData(): Observable {
return this.http.get(this.dataUrl)
.map(res => res);
}
}
在组件中:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../services/data.service';
@Component({
selector: 'app-data',
templateUrl: './data.component.html',
styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {
data: any;
constructor(private dataService: DataService) {}
ngOnInit() {
this.getData();
}
getData() {
this.dataService.getData().subscribe(data => {
this.data = data;
// 手动更新屏幕
});
}
}
在组件中,用订阅数据的方式更新界面,而不是通过空白点击。