現在、ネストされたコメントを作成しようとしています。現在、コメントに応答できるように動的フォームコンポーネントを導入しています。両親と子供だけがいる場合はうまくいくが、兄弟がいる場合は最初のものが選ばれる。例えば、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>
がどのように私はコメントするviewContainerRefの設定に行くかのような基準で選択することが
を使用することですか? –
申し訳ありませんが、私はその質問を理解していません。あなたが達成しようとしていること、試したこと、失敗した場所を示すあなたの質問にいくつかのコードを追加する方が簡単でしょう。 –
さて、私は投稿を更新しました。それはviewContainerRef.createComponentであり、最初の#replylinkに対処します。これは、childCommentsがコメントごとにngForを通過するためです。 –