json - 将 JSON 数据从应用程序组件传递到 Angular 6 中的另一个组件

Question

我有两个组件，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，答案不符合我的要求。

Answer 1

一种解决方案可能是在 app.component.ts 中使用公共(public)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 交互并呈现数据，而您的服务则负责检索和分发数据。