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

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 ]

现场演示