同一个Angular 6组件的多个实例

Question

我正在构建一个仪表板，显示来自包含各种服务器信息的大型JSON对象的数据。在仪表板中，我将有12个正方形包含完全相同的信息但来自不同的来源（CPU使用率，ram使用情况，错误列表等）。

所以我想知道是否有可能动态地支持一个接受参数的组件，例如3个数字和一个字符串，比如ram，cpu，power和IP地址（实际上接近20个不同的datapoints），然后使用Angular 6组件在init上复制它，但将不同的数据传递给同一组件的12个不​​同实例中的每一个。我假设使用Bootstrap我能够使用网格格式化大小和位置。

一个简单的例子将受到高度赞赏！

Answer 1

您可以定义组件以将所需的属性作为输入，并使用不同的输入多次重复使用相同的组件。

在下面的示例中，您使用HelloComponent属性定义name，使用不同的输入初始化HelloComponent的多个实例。

儿童

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

<强>父

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

Demo

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控制组件的各种实例。