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