角5-删除用户删除的父视图中的子组件
角5-删除用户删除的父视图中的子组件
提问于 2017-12-06 11:50:33
我有两个组件一个瞬间(帖子/线程)和一个评论，每个时刻可以有多个评论。
在瞬间-细节。组件我插入一个瞬间-注释.组件。注释组件显示与当前关联的所有注释。
moments-detail.component.html
<div id="moment">
...
<app-moment-comment [moment]="moment" [auth]="auth" [comment]="comment" class="comment" *ngFor="let comment of moment?.comments; let i=index">
</app-moment-comment>
</div>
</div>
</div>moment-detail.component.ts
@Component({
selector: 'app-moment-detail',
templateUrl: './moment-detail.component.html',
styleUrls: ['./moment-detail.component.scss']
})
export class MomentDetailComponent implements OnInit {
moment: Moment;
constructor(private router: Router,
private route: ActivatedRoute,
private momentService: MomentService,
private authService: AuthService,
private commentService: CommentService) { }
ngOnInit() {
this.route.params.switchMap((params) => {
let moment_id = params['id'];
return this.momentService.get(moment_id);
}).subscribe((res) => {
console.log(res);
this.moment = res;
this.user = res.author;
});
this.authService.getAuthenticatedUser().subscribe((res) => {
this.auth = res;
});
}
}这个矩-注释循环遍历所有的注释，并创建一个新的矩-注释组件实例。
现在，用户可以在这一刻内触发对其注释的删除。
@Component({
selector: 'app-moment-comment',
templateUrl: './moment-comment.component.html',
styleUrls: ['./moment-comment.component.scss']
})
export class MomentCommentComponent implements OnInit {
@Input() comment: Comment;
@Input() auth: any;
@Input() moment: any;
showReply: any;
reply: any;
showReplies: boolean;
inEdit = false;
editComment: any;
constructor(private commentService: CommentService) { }
...
delete() {
this.commentService.delete(this.moment._id, this.comment._id).subscribe((res) => {
console.log(res);
}, (err) => {
console.log(err);
});
}
...
}当然，当用户触发delete()函数时，后端会更新我的数据库，以显示注释从此时起被删除。
我的问题是，我如何在正面反映这种变化，即家长(具体细节)的观点？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-06 12:16:06
您需要将事件从注释组件发出到它的父组件，即细节组件，并从数组的详细组件中删除注释，如下所示：
moments-detail.component.html
<div id="moment">
...
<app-moment-comment (onDelete)="removeComment(i)" [index]="i"
[moment]="moment" [auth]="auth" [comment]="comment" class="comment"
*ngFor="let comment of moment?.comments; let i=index">
</app-moment-comment>
</div>
</div>
</div>moments-detail.component.ts
removeComment(index: number) {
this.moment.comments.splice(index, 1);
}moment-comment.component.ts
...
@Output() public onDelete: EventEmitter<any> = new EventEmitter();
@Input() comment: Comment;
...
delete() {
this.commentService.delete(this.moment._id, this.comment._id).subscribe((res) => {
console.log(res);
this.onDelete.emit();
}, (err) => {
console.log(err);
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47673613
复制相关文章
相似问题
腾讯云开发者
