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。希望对您有所帮助。

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

4 个答案: