问题描述
我的最终目标是拥有一个自定义容器组件,其中包含可单独访问的自定义卡组件的动态列表(而不是使用ng-content作为单个实体).
My ultimate goal is to just have a custom container component with a dynamic list of custom card components that are individually accessible (not as a single entity using ng-content).
<custom-card-holder> <custom-card></custom-card> <custom-card></custom-card> ... <custom-card></custom-card></custom-card-holder>
<custom-card-holder> <custom-card></custom-card> <custom-card></custom-card> ... <custom-card></custom-card></custom-card-holder>
理想情况下,我只是使用ContentChildren查询来获取子组件,然后将每个组件放入自定义持卡人内部的样式div中.
在样式div中单独显示每个内容子级,以使其很好地适合持有人.
The displaying each content child individually in the styled div to get it to fit nicely in the holder.
我已经尝试过使用TemplateOutlet和其他一些零碎的东西,但是ComponentOutlet似乎是最有前途的.
I have tried using TemplateOutlet and a few other odds and ends but the ComponentOutlet seems the most promising.
我想避免上面显示的代码出现任何额外的混乱情况.我知道可以直接输入数据,并且可以在内部使用该组件而没有任何包含,但这仅意味着更复杂的界面让其他人找出来.
I would like to avoid any extra clutter on the code shown above. I understand the data can just be input and the component can be used inside without any transclusion but that just means a more complex interface for others to figure out.
推荐答案
@Arivinds评论导致修复了语法问题,并且还解决了原始问题的半解决方法.
@Arivinds comment here led to fixed a syntax problem and also a semi-workaround for the original issue.
-
ngComponentOutlet采用类型/类而不是实例.
The ngComponentOutlet takes a Type/Class not an instance.
将类与实例嵌套在列表中
Nesting the Class in a list with the instance:
cardList = [{ component:CardClass,context:instance}]
最后,我添加了一个CardHolder
组件,该模板只是一个<ng-content></ng-content>
,而不是cardList
类,而我在cardList
中使用了CardHolder
.
In the end I added a CardHolder
component which template is just a <ng-content></ng-content>
and instead of Card
class I had CardHolder
in the cardList
.
然后,我使用ngComponentOutlet
的content属性将实际的Card
投影到CardHolder
中.
Then I used the content property of ngComponentOutlet
to project my actual Card
into the CardHolder
.
cardList:any[] = [
{
type:CardHolder,
context:{}
}
];
`<div #scrollItem class="item" *ngFor="let card of cardList">
<ng-container *ngComponentOutlet="card.type;content: card.context;"></ng-
container>
</div>`
收获是content(ngComponentOutlet)带有一个Node,所以当我查询ContentChildren
时,我故意抓住了ElementRef
并使用了nativeElement
. 请注意双方括号.
The catch is that content(ngComponentOutlet) takes a Node so When I query for ContentChildren
I purposefully grabbed the ElementRef
and used nativeElement
. Note the double square brackets.
`ngAfterContentInit(){
this.cardList = this.cards.toArray().map((card)=>{
return {type:CardHolder,context:[[card.nativeElement]]};
})
}`
希望这可以帮助同一条船上的任何人.
Hope this helps anyone in the same boat.
注意:应该将输入添加到动态组件的功能在工作中/积压中,但目前尚未实现
Note: The ability to add inputs to dynamic components is supposedly in the works/backlogged but currently not implemented
注意:另外,我相信任何动态组件都必须位于NgModule的entryComponents数组中
Note: Also I believe any dynamic components must be in the entryComponents array of the NgModule
这篇关于Angular 4使用ngComponentOutlet来显示动态变化的ContentChildren的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!