Angular 4使用ngComponentOutlet来显示动态变化的ContentChildren [英] Angular 4 using ngComponentOutlet to display dynamically changing ContentChildren

问题描述

我的最终目标是拥有一个自定义容器组件，其中包含可单独访问的自定义卡组件的动态列表(而不是使用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.

1. ngComponentOutlet采用类型/类而不是实例.

1. 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！