Что-то вроде того:

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

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

 AJT_8219 нояб. 2017 г., 12:46
 M Q19 нояб. 2017 г., 13:43
Обновил мой вопрос
 AJT_8219 нояб. 2017 г., 13:27
Хорошо, если вы попытались, пожалуйста, создайте демонстрацию, которая демонстрирует вашу проблему, или, по крайней мере, обновите ваш вопрос с вашей попыткой (хотя оставьте оригинальный вопрос на месте)
 M Q19 нояб. 2017 г., 13:23
Я использовал этот метод создания общего сервиса, но в ответ я получаю пустой объект.

Ответы на вопрос(2)

Решение Вопроса

вы можете видеть, что компонент консоли входа в систему выполняетсядо извлечение данных из бэкэнда. Это, потому что этоасинхронныйТаким образом, для получения ответа требуется некоторое время.

Вторая проблема, которая связана с той же проблемой, т. Е. Она асинхронна, заключается в том, что вы ничего не можете вернуть из подписки, вам нужно вернуть Observable вашему компоненту, а в компоненте подписаться, либо сделать это «вручную», либо затем использовать асинхронная труба.

Если вы хотите обмениваться данными с другими компонентами после первоначального получения другого компонента, вы можете использовать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)
}

Это решение основано на идее, что у вас есть один компонент, который сначала получает данные, а затем делится ими с другими компонентами.

 AJT_8220 нояб. 2017 г., 08:12
Большой! Рад слышать, что он соответствует вашим требованиям! :)
 M Q20 нояб. 2017 г., 08:09
Спасибо, это было именно то, что я искал!

чтобы пойти сюда! Вы также можете заключить его в выражение ngIf и указать псевдоним. Это гарантирует, что вы не получите и «не можете сделать что-то с пустым или неопределенным» в дочернем элементе.

Что-то вроде того:

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

Ваш ответ на вопрос