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

Array对象应该是在的AppModule利用他们作为

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