如何制作一个可重用的组件，每次使用时接受不同的数据？

Question

编辑：我的解决方案是重新思考我想要实现的目标，而不是尝试创建一个从不同来源获取参数和数据然后在父级中多次调用的组件，我制作了一个仅使用网格的组件布局（材质网格），然后它包含所有模板标记和 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[] = [];
  @Input() data: 'dataProject' | 'dataTask' = 'dataProject';

  constructor(
    public projectService: ProjectService,
  ) { }

  ngOnInit() {
    this.projectService.getProjects().subscribe( res => {
      // assign res to data. 
  }

Answer 1

为了显示甚至使其可编辑，您必须以某种方式了解数据。问题是，您的输入数据彼此之间有多少差异？

如果您想要显示少量不同的对象，那么我将为每个对象类型创建一个子组件。您将该对象提供给可重用组件，它会显示正确的子组件（通过使用 *ngIf）

另一种选择是，您的可重用组件需要显示“属性”列表。属性将表示对象的一个​​值及其描述。它可能看起来像这样：

objAttrs = [{ value: 'my text', label: 'Content', type: 'string', readonly: 'false' }]

可重用对象采用此属性列表，并根据提供的信息显示每个属性。缺点显然是，您必须将每个对象解构为属性 - 但问题是：您必须知道数据，这意味着您必须知道要显示的字段的名称。

第三种选择是使用反射。但我在 Javascript 和 Angular 方面都没有太多经验，我什至不确定这是否可以与 Angular 绑定一起使用 - 你必须通过 google 来了解如何使其工作或者它是否可以工作。