將JSON數據從App組件傳遞到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

您可以實現執行所有相關http操作的通用服務，並且可以將此服務注入到您想要的任何組件中並讀取json。

確保您返回http.get並在調用此方法的任何位置進行訂閱。

如果您不了解服務，則可以閱讀有關以角度創建和注入服務的信息。

Answer 2

一種解決方案是在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
  }  
 })
}

通常，我將這種邏輯存儲在Service中，在組件中使用它肯定會為您指明學習該概念的正確方向。 最好，您的組件應負責與UI交互並呈現數據，而您的服務則負責檢索和分發數據。

Answer 3

您可以使用rxjs subject通過應用程序發出數據，並使用subject.getValue（）方法在任何地方獲取數據。

Answer 4

首先，在開始研究任何技術之前，您應該花些時間來理解任何技術的概念。 否則，您將花費大部分時間尋求幫助。

我在這里創建了演示-https: //stackblitz.com/edit/angular-lko7pa 。 希望對您有所幫助。