角4：我應該在ngfor中使用純html或子組件：最佳實踐

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邏輯可以更清晰地分離出來，而不是僅僅將其推入父級組件中。

或者...：

• 考慮改用嵌套組件。 在這里閱讀更多 。
• 在GitHub上閱讀此線程，討論組件目錄結構

Answer 2

我更喜歡使用子組件，因為它為數組的每個項目創建了單獨的實例。

當您執行切換面板之類的功能時，它將更加有用。 如果您是子組件，那么將很容易處理切換，因為每個項目都有自己的實例。

Answer 3

完整組件的“半路”步驟是將ngTemplateOutlet與上下文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>