Angular - 列出不同的组件

Question

我想做一面墙，我有三种不同的墙贴类型。

• 文本
• 照片
• 视频

最佳做法是什么？ 3个不同的组件，或1个组件，里面有3个案例？

如何在* ngFor中选择正确的组件？

<div *ngFor="let post of posts">
   <text-post *ngIf="post.type == 1"></text-post>
   <photo-post *ngIf="post.type == 2"></photo-post>
   <video-post *ngIf="post.type == 3"></video-post>
</div>

Answer 1

我会选择其中包含ngSwitch的一个组件。

所以你可以这样做：

<div *ngFor="let post of posts">
    <ng-container [ngSwitch]="post.type">
        <text-post *ngSwitchCase="1"></text-post>
        <photo-post *ngSwitchCase="2"></photo-post>
        <video-post *ngSwitchCase="3"></video-post>
    </ng-container>
</div>

ng-container是一个不在DOM中呈现的元素，因此不会干扰页面的布局。