Угловой проход компонента к компоненту в качестве параметра

Question

Я пытаюсь создать список многократного использования, который отображает элементы типа T. Вид этих элементов зависит от T. Чтобы сломать эту зависимость, я решил также пропустить компонент вида.

Например, список содержит элементы типа "Автомобиль". Представление, передающее этот список, используется для отображения атрибутов ".ps" и ".color" каждого элемента.

К сожалению, я новичок в Angular, и я не могу понять, как сделать это правильно. Я хотел бы сделать что-то вроде этого:

родовой-list.ts

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

родовое-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"). С другой стороны, эта зависимость сохраняется в одной фабрике.

Вот код:

родовой-список-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>

фабричный listelement.ts

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

Завод-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

Я не верю, что это возможно. Элемент HTML, используемый для ссылки на "embeddedComponent...", не привязан к данным, как атрибуты элемента. То, что вы могли бы сделать, - это иметь ограниченное количество дочерних компонентов в списке и передавать такой параметр, как 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>