Comment utiliser la toile de fond Cliquez sur une boîte de dialogue de tapis pour fermer la boîte de dialogue et renvoyer les données qui ont changé au composant parent

Essayez d'ajouter ce

VisualizePublicationComponent

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

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

Où this.resultData correspond aux données que vous souhaitez renvoyer au composant parent. J'ai essayé cela et cela fonctionne pour l'esc et le clic de fond. J'espère que cela vous aidera.

En ce qui concerne la conception des matériaux, cliquer en dehors de la boîte de dialogue équivaut à appuyer sur échapper et les deux sont équivalents à une opération d'annulation, par conséquent aucune modification des données ne doit se produire. Les utilisateurs ne s'attendraient pas à ce que les modifications soient «poussées» s'ils annulent leurs modifications.

Cela étant dit, si vous souhaitez accéder à la copie des données de la boîte de dialogue (et non au «résultat» d'une «fermeture» appropriée), vous pouvez utilisez 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;
});

La réponse était un peu différente de ce à quoi je m'attendais, mon collègue m'a aidé, j'avais déjà une fonction qui ferait le contrôle du bouton similaire, cela a changé la couleur du bouton et ajouté 1 au compteur etc., ce dont j'avais besoin, c'était dans cette même fonction, d'appeler une méthode à l'intérieur d'un service qui ferait une requête http pour tout changer, la logique derrière le bouton like est maintenant faite dans le modèle, donc quand la requête http recherche le données, il renvoie un modèle qui renvoie déjà la sortie correcte, cette méthode est meilleure car elle met à jour la vue immédiatement pour la boîte de dialogue et le composant parent.

Je crois toujours qu'il existe un moyen de faire la même chose avec mat- dialog sont propriétaires, mais ce n'est pas vraiment nécessaire.

voici la fonction que j'ai mentionnée:

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 + ')', []))
        );

}

voici un exemple de la méthode de service: p>

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

c'est incomplet, il y a encore un tas de fonctions là-dedans, mais c'est l'idée principale, de cette façon mon code fonctionne mieux alors J'en ai bien l'intention et je le garde dans les bonnes pratiques et en suivant l'architecture que nous mettons en œuvre, merci pour vos réponses.