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

Question

编辑:我的解决方案是重新考虑我想要实现的目标，而不是尝试创建一个从不同来源获取参数和数据的组件，然后在父级中多次调用，我制作了一个只使用网格的组件布局( Material 网格)，然后它包含所有模板标记和 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 绑定(bind) - 你必须谷歌才能了解如何使其工作或者它是否可以工作。