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