如何使用 ngComponentOutlet 对多种类型的组件进行 ngFor?
How to ngFor on multiple types of components using 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 ]
我有一个类似 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 ]