如何使用 ngComponentOutlet 对多种类型的组件进行 ngFor？答案

【问题标题】：How to ngFor on multiple types of components using ngComponentOutlet?如何使用 ngComponentOutlet 对多种类型的组件进行 ngFor？
【发布时间】：2017-12-21 15:53:19
【问题描述】：

我有一个类似whatsapp 的聊天案例，其中包含需要以不同方式显示的多种消息。

每个都有自己的组件，例如TextMessageComponent、FileMessageComponent等。

我希望能够ngFor 一次在我的消息数组上，而不必ngIf 超过类型。

我听说ngComponentOutlet 可能是解决方案，但发现很难实施..

任何建议、迷你演示或任何您认为有用的东西都将不胜感激！

【问题讨论】：

使用控制器或视图将两者放入一个数据数组中。

标签： angular ngfor ng-component-outlet

【解决方案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

【讨论】：

@mayur 谢谢。 :) :)
是否有可能将数据传递到“*ngComponentOutlet”？
@Benjamin 是的，有可能
sliderComponent 和 usersComponent 是类型还是实例？我问是因为它们是小写的
是的，它们本身就是组件@Simon