angular - 如何使用 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 ]

现场演示