Есть простой компонент комментариев:
import {Component, Input, OnInit} from 'angular2/core';
export class Comment {
id: number;
text: string;
comments: Comment[];
}
@Component({
selector: 'comment',
template: `
<div>
#{{comment.id}} - {{comment.text}}
<p (click)="commenting = !commenting">Ответить</p>
<textarea *ngIf="commenting"></textarea>
<div class='coms' *ngFor="#com of comment.comments">
<comment [cmnt]="com"></comment>
</div>
</div>
`, directives: [CommentsComponent],
styles: [`.coms {margin-left: 20px} p {margin: 0} textarea {width: 600px; max-width: 100%}`]
})
export class CommentsComponent {
@Input() cmnt: Comment
comment: Comment;
commenting: boolean;
ngOnInit() {
this
this.commenting = true;
if (this.cmnt) this.comment =
this.cmnt;
else
this.comment = <Comment>{ id: 1, text: 'Text', comments: [{ id: 2, text: 'Txt2', comments: [{ id: 2, text: 'Txt2' }, { id: 3, text: 'Txt3' }] }, { id: 3, text: 'Txt3', comments: [{ id: 2, text: 'Txt2' }, { id: 3, text: 'Txt3' }] }] };
}
}
Результатом которого является следующая страница:
Как сделать, чтобы при нажатии "Ответить" скрывались textarea в остальных комментариях?