Estou aprendendo o Angular4 de pilha completa e queria saber como seria possível obter dados de uma chamada de recebimento de um componente para outro para poder retransmitir os dados para a página html com {{data.name}}?

Tentei importar o componente para o outro componente e, em seguida, defini um objeto vazio para o component.data que contém os dados, mas recebo um objeto vazio como resposta.

O que estou fazendo errado?

ATUALIZAR:

meu serviço compartilhado:

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 de destino:

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 tela do objeto Vazio do componente versus dados reais do serviço de dados.