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

发布时间：2020-12-17 07:53:01 所属栏目：安全来源：网络整理

导读：我有一个类似whatsapp的聊天案例,需要以不同的方式显示许多类型的消息. 每个都有自己的组件,如TextMessageComponent,FileMessageComponent等. 我希望能够在我的消息数组上使用ngFor一次,而不必对类型进行ngIf. 我听说ngComponentOutlet可能是解决方案,但发现

我有一个类似whatsapp的聊天案例,需要以不同的方式显示许多类型的消息.

每个都有自己的组件,如TextMessageComponent,FileMessageComponent等.

我希望能够在我的消息数组上使用ngFor一次,而不必对类型进行ngIf.

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

任何建议,迷你演示或任何有用的东西都将受到高度赞赏！

在对象上拥有属性可以帮助您

<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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!