Javascript Angular2将值传递给其他类

我正在尝试在我的NG2应用程序中使用D3图表，我已经用硬编码数据启动并运行了“图表”。我正在寻找一种能够从另一个组件向图表传递数据的方法。以下是“父”组件，其中包含图形显示的指令：

@Component({
  selector: "homeTest",
   properties: [ 'data' ]
})
@View({
  directives: [CORE_DIRECTIVES, BarGraph],  
    template: `
  <h1 class="title">Angular 2</h1>
  <bar-graph>
  </bar-graph> 
  `

})
export class HomeTest {

  meter: any;
  consumption: any;
  elementRef: any;
  constructor() {}

这是一个需要数据集的D3图表类：

@Directive({
  selector:   'bar-graph',
})
class BarGraph {
  data: Array<number>;
  divs: any;
  dataset: any;
  constructor( 
    @Inject(ElementRef) elementRef: ElementRef,
    @Attribute('width') width: string,
    @Attribute('height') height: string) {

    var w = 600;
    var h = 250;

var dataset = [ 
    { key: 0, value: 5 },
    { key: 1, value: 10 }
     ];

...

更新：

@Component({
  selector: "homeTest",
  properties: [ 'data' ]
})
@View({
  directives: [CORE_DIRECTIVES, BarGraph],  

    template: `
  <h1 class="title">Angular 2 + d3</h1>
  <bar-graph [graphdata]="dataset">
  </bar-graph>
  `

})

    export class HomeTest {
      dataset: Array<Object> = [ 
        { key: 0, value: 5 },
        { key: 1, value: 10 }
      ];

      constructor() {}

@组件({
选择器：“homeTest”，
属性：[“数据”]
})
@看法({
指令：[核心指令，条形图]，
模板：`
角度2+d3
`
})
导出类家庭测试{
数据集：数组=[
{键：0，值：5}，
{键：1，值：10}
];
构造函数（）{}

条形图：

@Directive({
  selector:   'bar-graph',

})
export class BarGraph {
  @Input() graphdata;
  data: Array<number>;
  divs: any;
  dataset: any;
  constructor( 
    @Inject(ElementRef) elementRef: ElementRef,
    @Attribute('width') width: string,
    @Attribute('height') height: string) {

    var w = 600;
    var h = 250;

var dataset = this.graphdata; //graphData undefined

@指令({
选择器：“条形图”，
})
出口级条形图{
@输入（）图形数据；
数据：数组；
分区：任何；
数据集：任意；
建造商（
@注入（ElementRef）ElementRef:ElementRef，
@属性（'width'）宽度：字符串，
@属性（'height'）高度（字符串）{
var w=600；
var h=250；
var dataset=this.graphdata；//graphdata未定义

您应该通过元素的属性传递数据

<bar-graph [graphdata]="dataset">

---

非常感谢，不过我有点困惑…我按照您的指示在HomeTest中放置了dataset:Array。这是否意味着我需要在BarGraph中的某个位置设置dataset=graphData？调试BarGraph时，this.graphData未定义。此外，此行：来自HomeTest中的模板？我对相同的数据使用了不同的名称o您可以看到在父级中调用了什么，在子级中调用了什么。您添加了

{…Input…}

到您在

条形图中的angular2导入语句中

？是的，我添加了输入，我添加了更新。我会继续尝试。谢谢您，但是这个.graphdata应该包含来自父级的数组吗？@user2915962我想构造函数调用的时间早于数据传递到组件的时间。使用

afterViewInit

方法，并使用

onChanges

，如果此后它将再次更改。感谢Simon！afterViewInit（）中存在此.graphData。现在一切正常。

@Directive({
  selector:   'bar-graph',

})
export class BarGraph {
  @Input() graphdata;
  data: Array<number>;
  divs: any;
  dataset: any;
  constructor( 
    @Inject(ElementRef) elementRef: ElementRef,
    @Attribute('width') width: string,
    @Attribute('height') height: string) {

    var w = 600;
    var h = 250;

var dataset = this.graphdata; //graphData undefined

<bar-graph [graphdata]="dataset">

export class HomeTest {
  dataset: Array<Object> = [ 
    { key: 0, value: 5 },
    { key: 1, value: 10 }
  ];

class BarGraph {
    @Input() graphdata;
    constructor() {}
    afterViewInit() {
      var dataset = this.graphdata;
    }