将 API 数据从一个组件传递到另一个组件？

Question

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

来自组件的空对象与来自数据服务的实际数据的屏幕截图。

Answer 1

首先，您可以看到控制台登录组件在从后端获取数据之前执行。这个，因为这是异步的，所以响应到达需要一段时间。

第二个问题，与同一个问题相关，即异步，你不能return订阅任何东西，你需要return一个Observable到你的组件并在组件订阅，要么这样做 "manually" 要么然后使用异步管道。

如果你想在最初获取另一个组件后将数据共享给其他组件，你可以做的是使用一个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)
}

此解决方案基于这样一种想法，即您有一个组件最初获取数据，然后与其他组件共享。

Answer 2

Async Pipe 很适合放在这里！你也可以将它包装成一个 ngIf 表达式并给它一个别名。它确保您不会在 child.

中得到 "cannot doSomething with null or undefined"

类似的东西：

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

将 API 数据从一个组件传递到另一个组件？

Pass API data from one component into another component?

components

mean-stack

angular