Estoy aprendiendo Full-stack Angular4 y quería saber cómo podría obtener datos de una llamada de un componente a otro para poder transmitir los datos a la página html con {{data.name}}.

Intenté importar el componente al otro componente, luego configuré un objeto vacío en ese componente.data que contiene los datos, pero recibí un objeto vacío como respuesta.

¿Qué estoy haciendo mal?

ACTUALIZAR:

mi servicio compartido:

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

componente objetivo:

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

Captura de pantalla del objeto vacío del componente frente a los datos reales del servicio de datos.