将零件的角度传递分量作为参数 [英] angular pass component to component as parameter

问题描述

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

I try to build a reusable list which displays elements of type T. The view of these elements depends on T. To break this dependency I decided to also pass the view component.

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

E.g. The list contains elements of type "Car". The view passing to this list is used to display the attributes ".ps" and ".color" of each element.

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

Sadly, I am a Newbie in Angular and I can't figure how to do this right. I would like to do something like this:

generic-list.ts

generic-list.ts

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

generic-list.html

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>

有什么想法吗? 谢谢:)

Any ideas ? Thanks :)

----更新:

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

I take Brandons answer but changed the implementation a little bit by using *ngSwitchCase and adding a factory component. The bad thing about this approach is that everytime a new ListElement comes in, the factory component has to be modfied (violation of "Open-Close-Principle". On the other hand is this dependency kept in one factory.

这是代码:

generic-list-html

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

factory-listelement.ts

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

factory-listelement.html

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>

推荐答案

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

I don't believe that's possible. The HTML element used to reference the "embeddedComponent..." is not data binded like element attributes can be. What you could do is have a restricted number of child components within the list and pass a parameter like type in, which would instruct the component to use one of the available child components.

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

So then in generic-list.html you'd have something like:

<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>

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

And you'd create it with:

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

这篇关于将零件的角度传递分量作为参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！