Angular 4使用ngComponentOutlet来显示动态变化的ContentChildren

Question

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>

Ideally I just grab the child components with ContentChildren query and put each one into a styled div inside the custom card holder.

The displaying each content child individually in the styled div to get it to fit nicely in the holder.

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.

Answer 1

@Arivinds comment here led to fixed a syntax problem and also a semi-workaround for the original issue.

1. The ngComponentOutlet takes a Type/Class not an instance.

2. Nesting the Class in a list with the instance:

   cardList = [{ component:CardClass,context:instance}]

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 .

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>`

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

Note : Also I believe any dynamic components must be in the entryComponents array of the NgModule