Angular 角度-具有不同组件的列表

我想做一面墙，我有3种不同的墙柱类型

• 正文
• 照片
• 录像带

最佳做法是什么？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>

---

我想要一个带有

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中呈现的元素，因此不会干扰页面的布局。

一个组件和三个case是实现这一点的可靠方法。