Angular 4：如何将API数据从一个组件传递到另一个组件？

我正在学习全栈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);
    }
}

组件中的空对象与数据服务中的实际数据的屏幕截图.

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)
}