如何使用mat-dialog的backdropClick关闭对话框并将更改后的数据发送回父组件

Question

我有以下场景:我使用mat-dilog来显示* and卡的信息。在这张卡中，有几个静态信息，比如消息的正文、标题和发布它的人，但我也有动态元素，在本例中是一个like按钮。当有人单击对话框外的like按钮(这是出版物的展开视图)时，like按钮变为红色，其计数器接收的值为it + 1，如果此人再次单击它，它将变为灰色，并且值为-1。如果有人打开对话框并单击按钮，然后单击close按钮，它可以正常工作，但如果有人单击like按钮，然后单击背景或按"esc“键，数据不会发送回父组件。我的代码如下：

visualize(value: any) { //method that opens the dialog

    if (value.link && !value.video_destaque)
        window.open(value.link, "_blank");
    else {
        const publicationData = { //pass the data to dialog
            id: value.id,
            cabecalho: value.header,
            corpo: value.body,
            ...
            curtiu: value.curtiu,
            classeFavorite: value.classeFavorite,
            num_curtidas: value.num_curtidas,
        };

        const dialogRef = this.dialog.open(VisualizePublicationComponent, { //open dialog
            maxHeight: '85vh',
            width: '70vh',
            panelClass: 'custom-dialog-container',
            disableClose: true,
            data: {
                publicacao: publicationData
            }
        });

        dialogRef.afterClosed().subscribe(result => { 
            this.post.curtiu = result.curtiu;
            this.post.favoritou = result.favoritou;
            this.post.num_curtidas = result.num_curtidas;
            this.post.classeLike = result.classeLike;
            this.post.classeFavorite = result.classeFavorite;
        });
    }
}

最后一部分"dialogRef.afterClosed...“将数据传回父组件，但它仅适用于mat-对话框-关闭按钮，似乎如果您在对话框外单击，它会认为您想要取消并完全忘记数据。

因为它是一个喜欢按钮，用户可能想要阅读帖子，然后喜欢它，并以最简单的方式关闭它(点击框外)。

我认为我的问题的答案与以下代码相关

dialogRef.backdropClick().subscribe(() => { dialogRef.close(); })

但我不知道我错过了什么。

Answer 1

试着添加这个

VisualizePublicationComponent

...
constructor(public dialogRef: MatDialogRef<VisualizePublicationComponent>) {  }
...

ngOnInit() {
   this.dialogRef.beforeClose().subscribe(() => this.dialogRef.close(this.resultData));
}
...

其中，this.resultData是要返回到父组件的数据。我已经尝试过了，它适用于esc和背景点击。希望这能有所帮助。

Answer 2

就材料设计而言，在对话框外单击等同于按Esc键，两者都等同于取消操作，因此不应发生任何数据更改。如果用户取消了他们的更改，他们不会期望更改被“推送”。

也就是说，如果您想访问对话框的数据副本(而不是来自适当的“close”的“result”)，您可以使用dialogRef.componentInstance.data

dialogRef.afterClosed().subscribe(result => { 

    if (!result) {
        result = dialogRef.componentInstance.data;
    }

    this.post.curtiu = result.curtiu;
    this.post.favoritou = result.favoritou;
    this.post.num_curtidas = result.num_curtidas;
    this.post.classeLike = result.classeLike;
    this.post.classeFavorite = result.classeFavorite;
});

Answer 3

答案与我预期的略有不同，我的同事帮我解决了这个问题，我已经有了一个函数来控制like按钮，它改变了按钮的颜色并将1加到了计数器等等，我需要做的是在同一个函数中调用一个服务中的方法，该方法将发出http请求来更改所有内容，like按钮背后的逻辑现在是在模型中创建的，所以当http请求查找数据时，它会返回一个已经返回正确输出的模型，这个方法更好，因为它会立即更新对话框和父组件的视图。

我仍然相信，有一种方法可以用mat-dialog专有对象做同样的事情，但这并不是真的必要的。

下面是我提到的函数：

public likeControl(publicacao: Publicacao) {
    const resultadoCurtir = publicacao.curtir();

    if (resultadoCurtir) {
        this.consumerCommunicationService.likePost(this.pessoa, publicacao.id).subscribe(
            response => {
                if (response.status < 299) {
                    PostCardComponent.successMessageToast('Pronto!');
                } else {
                    const promise = PostCardComponent.errorMessageFromResponse(response);
                }
            }
        );
    } else {
        this.consumerCommunicationService.dislikePost(this.pessoa, publicacao.id).subscribe(
            response => {
                if (response.status < 299) {
                    PostCardComponent.successMessageToast('Pronto!');
                } else {
                    const promise = PostCardComponent.errorMessageFromResponse(response);
                }
            }
        );
    }
}

下面是服务方法的一个示例：

public likePost(consumerId, postId): any {
    return this.http.put(environment.baseUrl + '/consumidor/' + consumerId + '/mensagens/mensagem/' + postId + '/curtir', {},
        {observe: 'response'})
        .pipe(
            tap((response: any) => console.debug(JSON.stringify(response))),
            catchError(this.handleError('likePost(' + consumerId + ', ' + postId + ')', []))
        );

}

这是不完整的，我仍然有一堆函数在里面，但这是主要的想法，这样我的代码比我实际打算的工作得更好，我将它保持在良好的实践中，并遵循我们正在实现的体系结构，谢谢你的回答。