将 API 数据从一个组件传递到另一个组件?
Posted
技术标签:
【中文标题】将 API 数据从一个组件传递到另一个组件?【英文标题】:Pass API data from one component into another component? 【发布时间】:2018-05-02 18:04:22 【问题描述】:我正在学习全栈 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);
组件中的空对象与数据服务中的实际数据的屏幕截图。
【问题讨论】:
***.com/questions/35884451/… 我已经使用了这种创建共享服务的方法,我仍然得到一个空白对象作为响应。 如果您尝试过,请创建一个演示来展示您的问题,或者至少通过您的尝试更新您的问题(尽管保留原始问题) 更新了我的问题 How to share service data between components correctly in Angular 2的可能重复 【参考方案1】:首先,您可以看到控制台登录组件在从后端获取数据之前执行。这个,因为这是异步,所以响应到达需要一段时间。
第二个问题,与同一问题相关,即这是异步的,是您无法从订阅中返回任何内容,您需要将 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)
)
所以现在我们已经在这个初始组件中获取了数据,并设置了服务中的数据,这些数据被广播给所有其他需要它的组件。在这些组件中,您只需订阅这个 observable。
constructor(private dataService: DataService)
dataService.apiData$.subscribe(data => this.data = data)
此解决方案基于这样一种想法,即您有一个组件首先获取数据,然后与其他组件共享数据。
【讨论】:
谢谢,这正是我要找的! 太棒了!很高兴听到它符合您的要求! :)【参考方案2】:异步管道很适合在这里!你也可以将它包装成一个 ngIf 表达式并给它一个别名。它确保你不会在孩子中得到并且“不能做空或未定义的事情”。
类似的东西:
<div *ngIf="observalbe$ | async as someAlias">
<app-toBeRenderedWithDataOfObservable [fieldOfChild]="someAlias""></app-toBeRenderedWithDataOfObservable>
</div>
【讨论】:
以上是关于将 API 数据从一个组件传递到另一个组件?的主要内容,如果未能解决你的问题,请参考以下文章