Question

我正在创建Quora / facebook之类的评论功能。但评论可以深入探讨。以下是我的模板：

<ul>
    <li *ngFor="let item of items let i = index">

    <!-- some html code -->
   <button(click)="addComment(item.id,i)">
    <div>
            <ng-template #target></ng-template>           
    </div>

   </li>
</ul>

我正在创建动态组件和为此，我提到this回答。

export class myDynamicComponent {
     @ ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef; 
     constructor(private replyService: ReplyService, private cfr: 
     ComponentFactoryResolver){}

    public addComment(Id:any, index:any){
       this.commentService.getContent(Id)
              .subscribe(data => {
     let compFactory = 
     this.cfr.resolveComponentFactory(myDynamicComponent);              
     let instance=this.target.createComponent(compFactory).instance;
        instance.items=data ;
  }
 }
}

所以我在#target中创建动态组件。我有多个因为它在循环中生成。这个问题是新创建的组件会附加到第一个#target而不是当前（单击的）#target。

解决这个问题的方法是什么？

Answer 1

而不是：

<li *ngFor="let item of items let i = index">

    <!-- some html code -->
   <button(click)="addComment(item.id,i)">
    <div>
            <ng-template #target></ng-template>           
    </div>

   </li>

将其提取为单独的组件，如：

<li *ngFor="let item of items let i = index">

   <my-button-click-comment-something-component [sendToIt]="whateverYouNeed">
   </my-button-click-comment-something-component>

</li>

然后在my-button-click-comment-something-component动态组件创建和处理中。

如何将动态创建的组件放在所需的#target中

1 个答案: