我正在学习全栈Angular4,并且想知道如何从一个组件到另一个组件的get调用中获取数据,这样我就可以使用{{data.name}}将数据中继到html页面？
我尝试将组件导入到另一个组件中,然后将一个空对象设置到保存数据的component.data中,但我得到一个空对象作为响应.
我究竟做错了什么？
更新：
我的共享服务：
import {Injectable} from "@angular/core";
import {Http,Response,Headers,RequestOptions} from "@angular/http";
import {Observable} from "rxjs/Rx";
import 'rxjs/add/operator/map';
@Injectable()
export class DataService {
apiData: any;
constructor(private http: Http) {}
fetchData() {
return this.http.get('/api/data').subscribe((data) => {
this.apiData = data.json();
console.log(this.apiData);
})
}
}
目标组件：
import { Component } from "@angular/core";
import { AllTablesComponent } from '../tables/alltables.component';
import { DataService } from './../data.service';
@Component({
selector: 'app-target',templateUrl: './target.component.html',styleUrls: ['./target.component.css']
})
export class TargetComponent {
data: any;
constructor(private dataService: DataService) {
this.data = this.dataService.fetchData();
console.log("inside target component");
console.log(this.data);
}
}
组件中的空对象与数据服务中的实际数据的屏幕截图.
解决方法
首先,您可以看到在从后端获取数据之前执行控制台登录组件.这是因为这是异步的,所以响应到达需要一段时间.
第二个问题,与同一问题有关,即这是异步的,你不能从subscribe返回任何东西,你需要将一个Observable返回到你的组件和组件订阅中,或者“手动”或者然后使用它异步管道.
如果您想在最初获取另一个组件后将数据共享给其他组件,您可以做的是使用BehaviorSubject,因此在您的服务中声明：
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
//....
// don't use "any",type your data instead!
private apiData = new BehaviorSubject<any>(null);
public apiData$= this.apiData.asObservable();
fetchData() {
return this.http.get('/api/data').map((data) => {
return data.json();
})
}
// here we set/change value of the observable
setData(data) {
this.apiData.next(data)
}
并且在您获取数据并想要广播到其他组件的组件中,执行…
this.dataService.fetchData()
.subscribe(data => {
this.data = data;
// set data in service which is to be shared
this.dataService.setData(data)
})
所以现在我们在这个初始组件中获取数据,并设置服务中的数据,该数据被广播到需要它的所有其他组件.在这些组件中,您只需订阅此可观察对象.
constructor(private dataService: DataService) {
dataService.apiData$.subscribe(data => this.data = data)
}
