角4：如何从一个组件传递API数据到另一个组成部分？

Question

我学习的全堆栈Angular4，并想知道我将如何能够从get调用从一个组件到另一个获取数据，所以我可以与数据中继到HTML页面{{data.name}}？

我试图导入组件到另一组件，则设置一个空对象成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);
    }
}

从部件空对象VS从数据服务的实际数据的屏幕截图。

Answer 1

首先，你可以看到控制台登录组件从后端获取数据之前执行。这一点，因为这是异步的，所以需要一段时间的响应到达。

第二个问题，这是关系到同一个问题，即，这是异步的，就是你不能返回从订阅，您需要一个可观察返回到您的组件，在组件认购任何东西，无论是做“人工”或再使用异步管道。

如果你想在最初得到它的另一个组件来共享数据的其他组件，你可以做的是使用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)
}

该解决方案是基于你有一个组件，最初得到的数据，然后与其他组件共享它的想法。

Answer 2

异步管好去这里！你也可以把它包装成一个ngIf表达，并给它一个别名。它确保你不会得到和在孩子“可以用null或undefined不DoSomething的”。

类似的东西：

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