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 ]

<强> LIVE DEMO

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

1 个答案: