将 JSON 数据从 App 组件传递到 Angular 6 中的另一个组件答案

【问题标题】：Pass JSON data from App Component to another component in Angular 6将 JSON 数据从 App 组件传递到 Angular 6 中的另一个组件
【发布时间】：2018-10-11 14:47:08
【问题描述】：

我有两个组件， 1. 应用组件 2.主要组成部分

app.component.ts

  ngOnInit () {
      this.httpService.get('./assets/batch_json_data.json').subscribe(data => {
         this.batchJson = data as string [];    
       }

我能够将 JSON 从文件中获取到“batchJson”中，并且需要将其传递给我的主要组件以进行进一步操作。

没有任何事件或任何东西可以触发这个。

我还没有实现任何东西，我正在尝试阅读@Input、@Output 等，但不明白它是如何工作的，需要进一步了解。

我刚刚在 main.component.ts 中声明了基础

import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { AppComponent } from '../app.component';

export class MainComponent implements OnInit {
}

请帮帮我，我是 Angular 的绝对菜鸟，无法尝试任何事情，因为我的概念不清楚，我确实浏览过 Stack Overflow，答案不符合我的要求。

【问题讨论】：

标签： json angular components angular6

【解决方案1】：

一种解决方案是在您的 app.component.ts 中使用公共 BehaviorSubject。

public batchJson$ = new BehaviorSubject<JSON>(null);
   ngOnInit () {
      this.httpService.get('./assets/batch_json_data.json').subscribe(data => {
         this.batchJson = data as string [];  
         this.batchJson$.next(JSON.parse(data));
       }

然后在你的 main.component.ts

constructor(private _appComponent : AppComponent )

ngOnInit(){
  this._appComponent.batchJson$.subscribe((data)=>{
   if(data != null){
    //set data to local variable here
  }  
 })
}

通常我将这种逻辑存储在服务中，在组件中使用它肯定会让你找到学习这个概念的正确方向。您的组件最好负责与 UI 交互和呈现数据，而您的服务则负责检索和分发数据。

【讨论】：

【解决方案2】：

您可以实现执行所有相关 http 操作的通用服务，您可以将此服务注入您想要的任何组件并读取 json。

确保您返回 http.get 并在调用此方法的任何位置订阅它。

如果您不了解服务，可以阅读有关在 Angular 中创建和注入服务的信息

【讨论】：

【解决方案3】：

您可以使用 rxjs subject 通过应用程序发出数据，并使用 subject.getValue() 方法在任何地方获取数据。

【讨论】：

【解决方案4】：

首先，在开始研究任何技术之前，您应该抽出时间来了解任何技术的概念。否则，您将花费大部分时间寻求帮助。

我在这里创建了演示 - https://stackblitz.com/edit/angular-lko7pa。希望对你有所帮助。

【讨论】：