Как ngFor на нескольких типах компонентов с помощью ngComponentOutlet?

у меня есть whatsapp-подобный чат-случай многих типов сообщений, которые необходимо отображать по-разному.

каждый имеет свой собственный компонент, такой как TextMessageComponent, FileMessageComponent, etc..

Я хотел бы иметь возможность ngFor однажды на мои такие сообщения без ngIf над типами.

Я слышал ngComponentOutlet может быть решением, но его трудно реализовать..

любые предложения, мини-демо-или все, что вы найдете полезным будет очень признателен!

6
angular ng-component-outlet ngfor

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
}

]

убедитесь, что все компоненты загружаются через их в модуль 

entryComponents: [AlertDangerComponent, AlertSuccessComponent, usersComponent, sliderComponent ]

LIVE DEMO

9