원하는 #target에 동적으로 생성 된 구성 요소를 배치하는 방법

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> 

은 별도의 압축을 풉니 구성 요소와 같은 : 당신의 my-button-click-comment-something-component 할 동적 요소 생성 및 취급 다음

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

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

</li> 

합니다.