小编Rin*_*Len的帖子

编辑：我的解决方案是重新思考我想要实现的目标，而不是尝试创建一个从不同来源获取参数和数据然后在父级中多次调用的组件，我制作了一个仅使用网格的组件布局（材质网格），然后它包含所有模板标记和 API 调用，并在父级中调用一次。我认为这更容易维护，但不能在另一个仪表板中重用，除非我扩展它并在模板中使用 *ngIf。

我有一个仪表板，它将显示来自组件中 API 的不同数据列表，否则每个实例的数据列表都是相同的。

我能够创建该组件并在父级中使用它，并且可以提供基本的替代方案，例如图标旁边的标题文本，但我无法弄清楚如何为每个实例引用来自 API 的不同数据集。当我调用它时的组件。

如何创建一个可重用组件来接受与其他实例不同的数据并使用模板显示它？

我找到了一些关于如何重用组件的教程，但这不是我需要的。我考虑在模板中使用多个来*ngIf测试和显示/隐藏显示哪组数据，从而拥有一个具有多个变体的大型组件，但这看起来很混乱，并且具有多种用途将很难维护。

如您所见，我可以更改标题文本和图标等简单的内容，但数据需要更复杂的结构，每个实例的结构都不相同。

可重用的组件模板

<mat-card class="panel">
    <header class="subheader">
      <h2><mat-icon color="primary">{{iconRef}}</mat-icon> {{headerRef}}</h2>
      <hr class="header">
    </header>

    // a table or list of data here, changes for each use. 
    // Will use for example {{ data.activity }} from one endpoint
    // or {{ data2.location }} from some other endpoint

  </mat-card>

在父级中使用如下：

 <app-resusable-dash-one [headerRef]="' Prosjekt'" [iconRef]="'assignment'"></app-resusable-dash-one>

可重用组件.ts：

export class ResusableDashOneComponent implements OnInit {

  @Input() iconRef: string;
  @Input() headerRef: string;

  dataRef: any[] = …