在Angular 5中,可以使用RxJS库来处理异步服务调用。以下是一个示例解决方法,其中包含两个不同组件中的异步服务调用。
首先,创建一个名为data.service.ts
的服务,用于处理数据库调用:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';
@Injectable()
export class DataService {
getData(): Observable {
// 模拟数据库调用
return Observable.of('Data from database').delay(2000);
}
}
接下来,在组件1中,导入并使用DataService
来获取数据:
import { Component, OnInit } from '@angular/core';
import { DataService } from '路径/data.service';
@Component({
selector: 'app-component1',
template: `
{{ data }}
`
})
export class Component1 implements OnInit {
data: string;
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.getData().subscribe(data => {
this.data = data;
});
}
}
在组件2中,也导入并使用DataService
来获取数据:
import { Component, OnInit } from '@angular/core';
import { DataService } from '路径/data.service';
@Component({
selector: 'app-component2',
template: `
{{ data }}
`
})
export class Component2 implements OnInit {
data: string;
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.getData().subscribe(data => {
this.data = data;
});
}
}
在以上示例中,getData()
方法使用Observable.of()
来模拟数据库调用,然后使用delay()
来模拟响应延迟。在每个组件中,我们使用dataService.getData()
来获取数据,并通过subscribe()
来订阅数据的到达。当数据到达时,我们将其赋值给组件的data
属性,以在模板中显示。请确保在每个组件中正确导入和注入DataService
服务。
请注意,这个示例中的服务调用是同时进行的,不会等待前一个调用的响应。如果你想要等待前一个调用的响应再进行下一个调用,可以使用concatMap()
操作符来串联多个调用。