чаю полный стек 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);
    }
}

Снимок экрана: пустой объект из компонента и фактические данные из службы данных.