Как использовать ngFor для компонентов нескольких типов, используя ngComponentOutlet?

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