相同Angular 6組件的多個實例

Question

我正在構建一個儀表板，以顯示來自大型JSON對象的數據，該對象包含有關各種服務器的信息。 在儀表板上，我將有12個正方形，其中包含完全相同的信息，但來自不同的來源（CPU使用率，內存使用率，錯誤列表等）。

所以我想知道是否有可能動態地搭建一個接受參數的組件，例如3個數字和一個字符串，例如ram，cpu，power和IP地址（實際情況是接近20個不同的數據點），然后使用Angular 6組件在init上復制它，但是將不同的數據傳遞給同一組件的12個不​​同實例中的每個實例。 我認為使用Bootstrap可以格式化網格的大小和位置。

一個簡單的例子將不勝感激！

Answer 1

您可以定義組件以將所需的屬性用作輸入，並使用不同的輸入多次重復使用相同的組件。

在下面的示例中，您將使用name屬性定義HelloComponent ，並使用不同的輸入來初始化HelloComponent多個實例。

兒童

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

父級

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

---

演示版

Answer 2

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

在這里，您可以掌握所有來自不同端點和初始化的cpu，用法，其他數據值的邏輯。

data.component.html

//您的卡片邏輯。

同樣，您可以通過模型通過app.component.ts控制組件的各種實例。