Question

我有一个清单

*ngFor="let h of list"

取决于项目的类型＆＃34; h.type＆＃34;我想使用不同的组件来显示细节。如何加载组件？

Answer 1

您可以使用ng-template。 E.g。

<div *ngFor="let h of list">
  <ng-container *ngIf="h.type === 'FIRST'">
    <ng-container *ngTemplateOutlet="firstTemplate"></ng-container>
  </ng-container>

  <ng-container *ngIf="h.type === 'SECOND'">
    <ng-container *ngTemplateOutlet="secondTemplate"></ng-container>
  </ng-container>
</div>

<!-- now define the two templates -->
<ng-template #firstTemplate>
  <my-first-component/>
</ng-template>
<ng-template #secondTemplate>
  <my-second-component/>
</ng-template>

Answer 2

您可以使用* ngIf完成此操作并使用选择器直接在html中加载组件。

<component1 *ngIf="h.type == ‘car’"></component1>
<component2 *ngIf="h.type == ‘truck’"></component2>

当h.type为car时将显示组件1，当h.type为truck时将显示组件2。

Answer 3

您可以使用NgSwitch：

来完成此操作

<div *ngFor="let h of list" [ngSwitch]="h.type">
  <ng-container *ngSwitchCase="'x'">
    <component-x>
  </ng-container>
  <ng-container *ngSwitchCase="'y'">
    <component-y>
  </ng-container>
</div>

您可以跳过ng-container，但我没有测试过：

<div *ngFor="let h of list" [ngSwitch]="h.type">
    <component-x  *ngSwitchCase="'x'">
    <component-y  *ngSwitchCase="'y'">
</div>

角度组件，不同的内容取决于元素

3 个答案: