如何使用 ngComponentOutlet 对多种类型的组件进行 ngFor？

Question

我有一个类似 whatsapp 的聊天案例，其中包含多种类型的消息，需要以不同方式显示。

每个都有自己的组件，例如 TextMessageComponent、FileMessageComponent 等。

我希望能够 ngFor 我的消息数组一次，而不必 ngIf 类型。

我听说 ngComponentOutlet 可能是解决方案，但发现很难实施..

任何建议、迷你演示或您认为有用的任何东西都将不胜感激！

Answer 1

在对象上有一个属性应该可以帮助你

<div *ngFor="let item of items"  style="border: solid 1px; padding: 20px;margin: 20px;">
      <span style="color:red"> {{item.name}} </span>
      <ng-container *ngComponentOutlet="item.component"><ng-container>
  <br>
</div>

数组对象应该是

items:Array<any> = [
{
  name: 'slider'
  component: sliderComponent

},
{
  name: 'user'
  component: usersComponent

},
{
  name: 'slider'
  component: sliderComponent

},
{
  name: 'alert danger'
  component: AlertDangerComponent
}

]

通过在 AppModule 中使用它们确保所有组件都已加载

entryComponents: [AlertDangerComponent, AlertSuccessComponent, usersComponent, sliderComponent ]

LIVE DEMO

如何使用 ngComponentOutlet 对多种类型的组件进行 ngFor？

How to ngFor on multiple types of components using ngComponentOutlet?

angular

ngfor

ng-component-outlet