Angular 5 - 在用户删除时从父视图中删除子组件

Question

我有 2 个组件，一个 Moment(post/thread) 和一个 Comment，每个 moment 可以有多个 cmets。

在moment-details.component 中，我插入了一个moment-comment.component。评论组件显示与该时刻相关的所有 cmets。

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;
        });

    }
}

moment-comment 循环遍历所有 cmets 并创建一个新的 moment-comment 组件实例。

现在在 moment-comment.component.ts 中，用户可以触发删除他们的评论。

@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() 函数时，后端会更新我的数据库以显示评论已被删除。

我的问题是，如何在前端（即父级（时刻细节）视图）中反映这种变化？

Answer 1

您需要从评论组件向其父组件（即详细信息组件）发出事件并删除评论 来自数组的详细组件如下：

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);
    });

}