Question

我必须使用ngFor显示车辆清单要么我使用像这样的简单html -

<div class="list">
    <div class="list-item" *ngFor="let vehicle of vehicles" (click)="getSingleVehicleData(vehicle)">
        <div class="at-tooltip data-type-icon">
        <span class="icon-wrapper">
        <i class="icon-light-color">
        </i>
    </span>
</div>

或者我可以像这样使用子组件 -

<div class="list">
    <app-vehicle-list-item class="list-item"
        *ngFor="let vehicleItem of vehicles"
        [vehicleItem]="vehicleItem">
    </app-vehicle-list-item>
</div>

最佳做法是什么？

Answer 1

取决于你要重复使用多少 - 如果这是一次性组件，那么创建另一个内部组件就有点过分。但是如果你在整个应用程序中使用它，那么我肯定会把它作为一个子组件。

这还取决于是否有更多的vehicle特定逻辑可以更清晰地分离出来，而不是仅仅将其推入父组件中。

...可替换地：

请考虑使用嵌套组件。 Read more here。
阅读this thread on GitHub讨论组件目录结构

Answer 2

我更喜欢使用子组件，因为它为每个数组项创建了单独的实例。

当你实现像切换面板这样的事情时它会更有用。如果您是子组件，那么处理切换将非常容易，因为每个项目都有自己的实例。

Answer 3

完整组件的“中途”步骤是将ngTemplateOutlet与上下文一起使用。这样，您可以在多个位置使用相同的模板。

<div *ngFor="vehicle in vehicles">
    <ng-container *ngTemplateOutlet="myTemplate; context:vehicle"></ng-container>
</div>

<ng-template #myTemplate let-vehicle="vehicle">
  <span>{{vehicle}}</span>
</ng-template>

角度4：我应该在ngfor中使用普通的html或子组件：什么是最佳实践

3 个答案: