2016-09-08 7 views
2

現在、ネストされたコメントを作成しようとしています。現在、コメントに応答できるように動的フォームコンポーネントを導入しています。両親と子供だけがいる場合はうまくいくが、兄弟がいる場合は最初のものが選ばれる。例えば、Angular2 ViewContainerRefセレクタを動的にします

--[Root Comment] 
    --[Child Comment] 
     --[1 - Grandchild] 
     --[2 - Grandchild] 
     --[3 - Grandchild] 

セレクタ#replylinkが含まれている第三孫のために<a>タグにIをクリックすると、フォームが最初の孫に追加されます - それらはすべて#replylink.を持っているとして、私は、このタグを作ることができることをとにかくあり動的? #replylink{{comment.id}}のようにして、それを見つけることができるように@viewchildを更新することができますか?

EDIT:

@Component({ 
    moduleId: module.id, 
    selector: 'commentsLoop', 
    templateUrl: 'comments.loop.component.html', 
    entryComponents: [CommentsFormComponent], 
    directives: [CommentsLoopComponent] 
}) 

export class CommentsLoopComponent implements OnInit { 
    @Input() childComments:any; 
    @Input() type:any; 
    @Input() id:any; 
    @ViewChild('replylink', {read: ViewContainerRef}) viewContainerRef; 
    voteSubscription:any; 

    private componentFactory: ComponentFactory<any>; 
    constructor(private _http:Http, private _modal:ModalComponent, componentFactoryResolver: ComponentFactoryResolver, compiler: Compiler, private _auth: AuthService){ 
     this.componentFactory = componentFactoryResolver.resolveComponentFactory(CommentsFormComponent); 
    }; 
    ngOnInit(){}; 

    commentReply(id,generation,child){ 
      let instance = this.viewContainerRef.createComponent(this.componentFactory, 0).instance; 
      instance.comment_id = id; 
      if(child) instance.parent_id = child; 
      instance.id = this.id; 
      instance.type = this.type; 
      instance.generation = generation + 1; 
     } 
    } 
    ...other stuff... 
} 

<a>タグは次のとおりです。

<a (click)="commentReply(comment.comment_id, comment.generation, comment.id)" #replylink>Reply</a>

答えて

3

あなたは、動的テンプレート変数名を作成することはできません。あなたは何ができるか

は、それらのすべてを取得し、その後

commentReply(id,generation,child){ 
    let vcRef = this.viewContainerRefs.toArray().filter(c => c.id == id); 
    if(comment.length) { 
    ... 
    } 
} 
+0

がどのように私はコメントするviewContainerRefの設定に行くかのような基準で選択することが

@ViewChildren('replyLink', {read: ViewContainerRef}) viewContainerRefs:QueryList<ViewContainerRef>; 

を使用することですか? –

+0

申し訳ありませんが、私はその質問を理解していません。あなたが達成しようとしていること、試したこと、失敗した場所を示すあなたの質問にいくつかのコードを追加する方が簡単でしょう。 –

+0

さて、私は投稿を更新しました。それはviewContainerRef.createComponentであり、最初の#replylinkに対処します。これは、childCommentsがコメントごとにngForを通過するためです。 –

関連する問題