Question

问题（1）： - 希望将"results"数据从app.component.ts传送到abc.component.ts，bcd.component.ts，cde.component.ts，并使用如下所述的功能。怎么做？

问题（2）： - 这里，在console.log中获取"results"数据。

但是alert(this.loadedCharacter )中的错误为undefined？

app.component.ts

    import { Component,OnInit, HostListener } from '@angular/core';
    import { Router } from "@angular/router";
    import { Http } from "@angular/http";
    import { SingletonService } from './commons/data-singleton.service';
    import { JsonDataService } from "app/services/json-data/json-data.service";
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/observable/forkJoin';
    import 'rxjs/add/operator/map';


    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      providers:[]
    })
    export class AppComponent implements OnInit  {
      loadedCharacter: {};
loadedCharacter1: {};
      clientJson1: {
        "aoId": string;
        "viewBys": string[];
        "viewIds": string[];
        "globalViewbys": string[];
        "globalViewIds": string[];
        "dimensions": string[];
        "meassures": string[];
        "meassureIds": string[];
        "aggregation": string[];
        "globalInFilters": any;
        "globalNotInFilters": {
        };
        "localInFilters": {
        };
        "localNotInFilters": {
        };
        "drillDownFilters": {
        };
        "drillAcrossFilters": {
        };
      };
      clientJson: {
        "aoId": string;
        "viewBys": string[];
        "viewIds": string[];
        "globalViewbys": string[];
        "globalViewIds": string[];
        "dimensions": string[];
        "meassures": string[];
        "meassureIds": string[];
        "aggregation": string[];
        "globalInFilters": any;
        "globalNotInFilters": {
        };
        "localInFilters": {
        };
        "localNotInFilters": {
        };
        "drillDownFilters": {
        };
        "drillAcrossFilters": {
        };
      };
      data1: Observable<any>;
      data: Observable<any>;


      // SolrService
      public aoId: string[]
      public viewbys: string[] = ["brand"];  //Given by user  "Brand", "Category", "State" , "Region" , "city" , "Payment Method"
      public viewbysId: string[] = ["", "615128", "614847"];
      public dimensions: string[] = ["615228"];
      public measuresDefault: string[] = ["sales", "netsales"]; //Given by user
      public measures: string[] = ["sales", "netsales"]; //Given by user
      public measuresId: string[] = ["616275", "616283", "616279", "616648", "616295"];
      public aggregation = ["SUM", "SUM", "SUM", "SUM", "SUM", "SUM"];
      public globalInFilters: any = {};
      public globalNotInFilters = {};
      public localInFilters = {};
      public localNotInFilters = {};
      public drillDownFilters = {};
      public drillAcrossFilters = {};

      public elementIdsMap: any = { "615228": "Brand", "615128": "Category", "614847": "state" };

    private url ="http://183.82./Pvice/sovice"; //Global Server
      constructor(private router: Router, private http: Http, public jsonDataService: JsonDataService) {
      }

      ngOnInit() {
         this.clientJson = {
          "aoId": "M_AO_918",
          "viewBys": this.viewbys,
          "viewIds": this.viewbysId,
          "globalViewbys": ["brand", "uscity", "usstate"],
          "globalViewIds": ["615228", "615128", "614847"],
          "dimensions": this.dimensions,
          "meassures": this.measuresDefault,
          "meassureIds": this.measuresId,
          "aggregation": this.aggregation,
          "globalInFilters": this.globalInFilters,
          "globalNotInFilters": this.globalNotInFilters,
          "localInFilters": this.localInFilters,
          "localNotInFilters": this.localNotInFilters,
          "drillDownFilters": this.drillDownFilters,
          "drillAcrossFilters": this.drillAcrossFilters
        };

    this.clientJson1 ={
     "aoId": "M_AO_918",
          "viewBys": ["usstate"],
          "viewIds": this.viewbysId,
          "globalViewbys": ["brand", "uscity", "usstate"],
          "globalViewIds": ["615228", "615128", "614847"],
          "dimensions": this.dimensions,
          "meassures": this.measuresDefault,
          "meassureIds": this.measuresId,
          "aggregation": this.aggregation,
          "globalInFilters": this.globalInFilters,
          "globalNotInFilters": this.globalNotInFilters,
          "localInFilters": this.localInFilters,
          "localNotInFilters": this.localNotInFilters,
          "drillDownFilters": this.drillDownFilters,
          "drillAcrossFilters": this.drillAcrossFilters
    }

     this.data = this.http.post(this.url,this.clientJson).map(res => res.json());
        this.data1 = this.http.post(this.url,this.clientJson1).map(res => res.json());
           Observable.forkJoin([this.data , this.data1 ]).subscribe(results => {
          //results here
          this.loadedCharacter1  = results[1];
          this.loadedCharacter = results[0];
          console.log("results"+JSON.stringify(results[1]));
          console.log("results"+JSON.stringify(results[0]));
          // return results;
        });
         alert(this.loadedCharacter );
      }
    }

abc.component.ts

 initData(){

//how to get loadedCharacter from `app.component.ts` here, and then pass it into buildabcchart() as below;


let jsonData = loadedCharacter;   // loadedCharacter: {}; from app.component.ts
buildabcchart(jsonData );
}

buildabcchart(jsonData ){
/*--------------*/
}

Answer 1

问题1：

这是一个plunkr，用于演示从父组件传递数据到子组件https://plnkr.co/edit/dsnJShi87UUseFLVGscH?p=preview

因此，这使用输入绑定将数据从父级传递给子级。

// parent html
<child-component [someInput]="loadedCharacter"></child-component>

// child ts
export class ChildComponent{
    @Input() someInput; // someInput can be used throughout the child component
}

现在当你的parent.ts中定义了loadedCharacter时，它会通过＆＃34; someInput＆＃34;传递给孩子。输入绑定。

对于问题的第二部分，＆＃34;使用函数＆＃34;中的传入数据，您可以使用ngOnChanges生命周期钩子。在您的子组件中，您可以添加类似

的内容

// child ts
export class ChildComponent implements OnChanges {
    @Input() someInput; // someInput can be used throughout the child component


    ngOnChanges(){
        // do something with someInput here. This lifecycle hook is fired every time 1 or multiple input bindings are changed
    }
}

输入绑定资源：https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding

ngOnChanges生命周期钩子上的资源：https://angular.io/api/core/OnChanges

问题2

this.loadedCharacter未定义，因为您在异步任务（forkJoin（）。subscribe）之外调用alert。它在http请求完成之前被调用。如果将其移动到订阅中（并在分配this.loadedCharacter之后），它应该警告数据

Angular2承载存储在app.component.ts（父组件）变量中的数据到其他组件

app.component.ts

abc.component.ts

1 个答案: