angular - 指定索引处的动态组件未正确放置

Question

我试图在 Angular 中显示一个简单的项目列表，旁边有一个可点击的 div；在用户选择时，该组件应在单击的组件下方动态创建一个新组件。

为此，我使用 ComponentFactoryResolver 没有相关问题；但是，使用 ViewContainerRef 作为父级，我找不到如何将创建的组件放置在指定的索引处，即使我将它指定为 createComponent() 中的参数方法。

app.component.html

<h3>Click on the arrow to create a component below the item clicked.</h3>

<div #myContainer>
  <div *ngFor="let thing of things; let index = index">
    <div class="inline click" (click)="thingSelected(thing, index)"> > </div>
    <div class="inline">{{thing.id}}</div>
    <div class="inline">{{thing.name}}</div>
    <div class="inline">{{thing.value}}</div>
  </div>
</div>

app.component.ts

export class AppComponent  {  
  @ViewChild('myContainer', { read: ViewContainerRef }) container: ViewContainerRef;

  things = [];
  constructor(private componentFactoryResolver: ComponentFactoryResolver){
    for(let i=0; i < 10; i++)
      this.things.push({id: i, name: "thing" + i, value: 5 * i});    
  }

  thingSelected(thing: any, index: number){
    let component = this.container.createComponent(this.componentFactoryResolver.resolveComponentFactory(DetailComponent), index);
    component.instance.id = thing.id;    
  }
}

我还创建了一个 stackblitz演示问题的样本:我遗漏了什么或做错了什么？

澄清一下:

1. 我想复制类似于 "RowExpand" functionality 的东西在 PrimeNg 库的 TurboTable 中。用户点击一行，在点击的位置创建一个动态组件。
2. 我不知道运行时组件的类型:这就是我想要动态创建组件的原因(因此，在 html 模板中指定它不是我需要的)

Answer 1

好的，这是使用 @ViewChildren 的工作示例

https://stackblitz.com/edit/angular-gxmj4s?file=src%2Fapp%2Fapp.component.ts

  @ViewChildren('details', { read: ViewContainerRef }) containers: QueryList<ViewContainerRef>;

  thingSelected(thing: any, index: number) {
    const containersArray = this.containers.toArray();
    let component = containersArray[index].createComponent(this.componentFactoryResolver.resolveComponentFactory(DetailComponent));
    component.instance.id = thing.id;
  }

和

<div #myContainer>
  <div *ngFor="let thing of things; let index = index">
    <div class="inline click" (click)="thingSelected(thing, index)"> > </div>
    <div class="inline">{{thing.id}}</div>
    <div class="inline">{{thing.name}}</div>
    <div class="inline">{{thing.value}}</div>
    <div #details></div>
  </div>
</div>

结果