Question

编辑：我的解决方案是重新考虑我要实现的目标，而不是尝试创建一个从不同来源获取参数和数据，然后在父级中多次被调用的组件，而是创建了一个组件使用网格布局（材料网格），则它包含所有模板标记和API调用，并在父级中被调用一次。我认为这比较容易维护，但是除非扩展它并在Templete中使用* 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中都没有太多的经验，我甚至不确定它是否可以与角度绑定一起使用-您必须在Google上找到如何使它起作用或是否可以起作用的方法。 / p>

Answer 2

您要寻找ng-content吗？

e.g.

//In App.component
name = 'Angular';
data1=[{id:1,name:'one'},{id:2,name:'two'}]
data2=[{key:'a',text:'I am a'},{key:'b',text:'I am b'}]

//And 
<hello name="{{ name }}" >
    <div *ngFor="let item of data1">
      {{item.id}} {{item.name}}
    </div>
</hello>
<hr/>
<hello name="{{ name }}" >
    <div *ngFor="let item of data2">
      {{item.key}} {{item.text}}
    </div>
</hello>

你好在哪里

<h1>Hello {{name}}!</h1>
<ng-content></ng-content>

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

2 个答案: