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

現場演示