Несколько экземпляров одного компонента Angular 6

Question

Я создаю панель мониторинга, отображающую данные из большого объекта JSON, содержащего информацию на различных серверах.На панели инструментов у меня будет 12 квадратов, содержащих точно такую ​​же информацию, но из разных источников (загрузка ЦП, использование оперативной памяти, список ошибок и т. Д.).

Так что мне интересно, возможно ли динамически создать один компонент, который принимает аргументы, например, 3 числа и строку для, скажем, оперативной памяти, процессора, мощности и IP-адреса (фактическая вещь ближе к 20различные точки данных), а затем реплицируйте его при инициализации с использованием компонента Angular 6, но передавая разные данные каждому из 12 различных экземпляров одного и того же компонента.Я бы предположил, что с помощью Bootstrap я смогу отформатировать размеры и размещение с помощью сетки.

Простой пример был бы высоко оценен!

Answer 1

app.component.html

<data-component [cpu]="cpu" [usage]="usage" [otherData]="otherData"></data-component>
<data-component [cpu]="cpu1" [usage]="usage1" [otherData]="otherData1"></data-component>
<data-component [cpu]="cpu2" [usage]="usage2" [otherData]="otherData2"></data-component>
<data-component [cpu]="cpu3" [usage]="usage3" [otherData]="otherData3"></data-component>
<data-component [cpu]="cpu4" [usage]="usage4" [otherData]="otherData4"></data-component>

app.component.ts

здесь вы можете иметь логику для всех процессоров, использования, других значений данных, взятых с разных конечных точек и инициализировать.

data.component.html

// логика вашей карты.

также вы можете управлять различными экземплярами компонента через app.component.ts через модели.

Answer 2

Вы можете определить свой компонент, чтобы принимать требуемые свойства в качестве входных данных и повторно использовать один и тот же компонент несколько раз с различными входными данными.

В приведенном ниже примере вы определяете HelloComponent со свойством name, инициализируйте несколько экземпляров HelloComponent с разными входами.

Child

export class HelloComponent  {
  @Input() name: string;
}

Родитель

<hello name="Ben"></hello>
<hello name="Jack"></hello>
<hello name="Roger"></hello>

---

Демо