我有一个类似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