Angular2 Передача значений другому классу

Question

Я пытаюсь использовать D3-диаграммы в своем NG2-приложении, и у меня есть «диаграмма» вверх и работает с жестко закодированными данными. Я ищу способ передачи данных на диаграмму из другого компонента. Вот «родитель» компонентный, который содержит директиву, в которой будет отображен график:

@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() {} 

Его от этого компонента я выборки данных я хочу использовать в графике. Допустим, это выглядит следующим образом:

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


//Pass this dataSet to Barchart somehow? 
} 

А вот класс, где мы имеем 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 } 
    ]; 

... 

Как вы можете видеть здесь у меня есть жестко запрограммированный набор данных который работает, но как это может быть заменено набором данных, переданным из HomeTest?

Вот остальные Барграф при необходимости:

var xScale = d3.scale.ordinal() 
       .domain(d3.range(dataset.length)) 
       .rangeRoundBands([0, w], 0.05); 

var yScale = d3.scale.linear() 
       .domain([0, d3.max(dataset, function(d) {return d.value;})]) 
       .range([0, h]); 

var key = function(d) { 
    return d.key; 
}; 

//Create SVG element 
var svg = d3.select("bar-graph") 
      .append("svg") 
      .attr("width", w) 
      .attr("height", h); 

//Create bars 
svg.selectAll("rect") 
    .data(dataset, key) 
    .enter() 
    .append("rect") 
    .attr("x", function(d, i) { 
     return xScale(i); 
    }) 
    .attr("y", function(d) { 
     return h - yScale(d.value); 
    }) 
    .attr("width", xScale.rangeBand()) 
    .attr("height", function(d) { 
     return yScale(d.value); 
    }) 
    .attr("fill", function(d) { 
     return "rgb(0, 0, " + (d.value * 10) + ")"; 
    }) 



//Create labels 
svg.selectAll("text") 
    .data(dataset, key) 
    .enter() 
    .append("text") 
    .text(function(d) { 
     return d.value; 
    }) 
    .attr("text-anchor", "middle") 
    .attr("x", function(d, i) { 
     return xScale(i) + xScale.rangeBand()/2; 
    }) 
    .attr("y", function(d) { 
     return h - yScale(d.value) + 14; 
    }) 
    .attr("font-family", "sans-serif") 
    .attr("font-size", "11px") 
    .attr("fill", "white"); 

    } 

Update:

@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() {} 

Барграф:

@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 

Answer 1

Вы должны передать данные через свойство элемента

<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; 
    }