Angular

Question

我想做一面墙，我有 3 种不同的墙 post。

文字
照片
视频

最佳做法是什么？ 3 个不同的组件，或 1 个组件内部有 3 个箱子？

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

Angular - 包含不同组件的列表

Angular - List with different components

angular-components