Angular 将API数据从一个组件传递到另一个组件？

我正在学习完整的堆栈Angular4，我想知道如何从一个组件的get调用中获取数据到另一个组件中，以便使用{data.name}将数据中继到html页面中

我尝试将该组件导入到另一个组件中，然后在该组件中设置一个空对象。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返回任何内容，您需要向组件和组件subscribe中返回一个可观察的内容，或者“手动”执行，或者使用异步管道

如果您想在最初从另一个组件获取数据后将数据共享给其他组件，您可以做的是使用

BehaviorSubject

，因此在您的服务中声明：

从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
//....
//不要使用“任何”，而是键入您的数据！
私有apiData=新行为主体（null）；
public apiData$=this.apiData.asObservable（）；
fetchData（）{
返回此.http.get（'/api/data'）.map（（数据）=>{
返回data.json（）；
})
}
//在这里，我们设置/更改可观察值
setData（数据）{
this.apiData.next（数据）
}

在获取数据并希望广播到其他组件的组件中，请执行

this.dataService.fetchData（）
.订阅（数据=>{
这个数据=数据；
//在服务中设置要共享的数据
this.dataService.setData（数据）
})

现在，我们在这个初始组件中获取了数据，并将数据设置为服务中的数据，该数据将广播给所有其他需要它的组件。在这些组件中，您只需订阅这个可观察的

构造函数（私有数据服务：数据服务）{
dataService.apiData$.subscribe（data=>this.data=data）
}

---

此解决方案基于这样一种想法，即您有一个组件首先获取数据，然后与其他组件共享数据。

异步管道很适合在这里使用！还可以将其包装到ngIf表达式中并为其指定别名。它确保您不会在子对象中获取和“不能使用null或未定义的doSomething”

诸如此类：

<div *ngIf="observalbe$ | async as someAlias">
   <app-toBeRenderedWithDataOfObservable [fieldOfChild]="someAlias""></app-toBeRenderedWithDataOfObservable>
</div>

我使用了这种创建共享服务的方法，我仍然得到一个空白对象作为响应。如果您尝试了，请创建一个演示来展示您的问题，或者至少用您的尝试更新您的问题（保留原始问题）更新了我的问题可能重复的谢谢，这正是我要找的！伟大的很高兴听到它符合您的要求！：）