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

Question

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

所以我想知道是否可以动态搭建一个接受参数的组件，例如 3 个数字和一个字符串，用于表示 ram、cpu、电源和 IP 地址(实际情况接近 20 个不同的数据点) ，然后使用 Angular 6 组件在 init 上复制它，但将不同的数据传递给同一组件的 12 个不同实例中的每一个。我假设使用 Bootstrap 我能够使用网格格式化大小和位置。

如果有一个简单的例子，我们将不胜感激!

Answer 1

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

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

child

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

父级

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

---

Demo