Question

我尝试构建一个可重复使用的列表，该列表显示类型T的元素。这些元素的视图取决于T。为了打破这种依赖性，我决定还传递视图组件。

例如该列表包含“汽车”类型的元素。传递到此列表的视图用于显示每个元素的属性“ .ps”和“ .color”。

可悲的是，我是Angular的新手，我不知道该怎么做。我想做这样的事情：

generic-list.ts

export class GenericListComponent<T> { 
    @Input() readonly elements: T[]; // Array of objects to be listed; 
    @Input() embeddedComponentAsViewForEachGivenElementOfTypeT: any;
... 
}

generic-list.html

<mat-list>
    <mat-list-item *ngFor="let el of elements">
        <embeddedComponentAsViewForEachGivenElementOfTypeT [element]=el </embeddedComponentAsViewForEachGivenElementOfTypeT>
    </mat-list-item>
</mat-list>

使用列表如下所示：

  <app-generic-list [elements]="ArrayOfComplexObjects"
                         [embeddedComponentAsViewForEachGivenElementOfTypeT]="ViewComponentToDisplayComplexObject"> </app-generic-list>

有什么想法吗？谢谢：）

----更新：

我接受布兰登的回答，但是通过使用* ngSwitchCase并添加了工厂组件来稍微改变了实现。这种方法的坏处在于，每次有新的ListElement出现时，都必须修改工厂组件（违反了“ Open-Close-Principle”。另一方面，此依赖关系保留在一个工厂中。

以下是代码：

generic-list-html

<mat-list>
    <mat-list-item *ngFor="let el of elements">
        <app-factory-listelement elementToDisplay="el" typeOfListElement="carListElement"> </app-factory-listelement>
    </mat-list-item>
</mat-list>

factory-listelement.ts

export class FactoryListelementComponent implements OnInit {
    @Input() typeOfListElement: string;
    @Input() elementToDisplay: any;
    carType = 'carListElement';
    bikeType = 'bikeListElement';
    ...

factory-listelement.html

<div [ngSwitch]="typeOfListElement">
    <app-car-info-list-element TheCarElement="elementToDisplay" *ngSwitchCase="carType" >...</app-car-info-list-element>
    <app-bike-info-list-element TheBikeElement="elementToDisplay" *ngSwitchCase="bikeType" >...</app-bike-info-list-element>
    <!--default case when there are no matches -->
    <div *ngSwitchDefault> ERROR ! Make some error.log or so</div
</div>

Answer 1

我认为这是不可能的。与元素属性一样，用于引用“ embeddedComponent ...”的HTML元素不是数据绑定对象。您可以做的是在列表中添加数量有限的子组件，并在其中传递类似type的参数，这将指示该组件使用可用的子组件之一。

因此，在generic-list.html中，您将得到类似的内容：

<mat-list>
  <mat-list-item *ngFor="let el of elements">

    <component-option-one
      *ngIf="type === 'componentOptionOne'"
    ></component-option-one>

    <component-option-two
      *ngIf="type === 'componentOptionTwo'"
    ></component-option-two>

    <component-option-three
      *ngIf="type === 'componentOptionThree'"
    ></component-option-three>

  </mat-list-item>
</mat-list>

您将使用以下命令创建它：

<app-generic-list
  [elements]="arrayOfElements"
  [type]="'componentOptionOne'"
></app-generic-list>

将零件的角度传递分量作为参数

1 个答案: