将多个参数传递给Angular 2组件

Question

I'm trying to create a chart component in Angular 2.

So far it receives an array of tuples and displays this data as a line chart.

The parent component uses the chart like this:

<line-chart [values]="myFirstLineValues"></line-chart>

Now I want to display to lines in the same chart. I could add two input parameter (like values1 and values2 ), but maybe later I want to display n lines.

So I was thinking of having an array of arrays as input parameter. This would work. But when I want to individually style the lines I would need more arrays of properties for the styling as well. This doesn't seem to be a very elegant way.

I was hoping for a solution like this (pseudo syntax I just made up):

<line-chart>
    <line [value]="myFirstLineValues"/>
    <line [value]="mySecondLineValues" />
</line-chart>

Later I could add styling for the lines with special properties of each line (or even passing a CSS class in for each line).

Is this or something similar possible in Angular 2? Or am I looking at it the wrong way?

Answer 1

You could maintain an array of object, where object is {style: string, data: []} , making your input of type: {style: string, data: []}[] .

This gives you the array of arrays approach, and associates a style with each set of data.