Как использовать фоновый щелчок мат-диалога, чтобы закрыть диалог и отправить данные, которые изменились, в родительский компонент

Question

У меня есть следующий сценарий: я использую mat-dilog для отображения информации о карте * ngFor, в этой карте есть пара статических данных, таких как текст сообщения, заголовок и лицо, котороеопубликовал его, но у меня также есть динамические элементы, в данном случае кнопка «Мне нравится».Когда кто-то нажимает кнопку «Мне нравится» за пределами диалога (которая представляет собой расширенный вид публикации), кнопка «Мне нравится» становится красной и ее счетчик получает значение + 1, если человек нажимает на нее снова, он становится серым и имеет значение deоб этом - 1. Если кто-то откроет диалоговое окно, нажмет на кнопку и нажмет на кнопку закрытия, он работает нормально, но если кто-то нажимает на кнопку «Нравится» и затем нажимает на фоне или нажимает «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 ..." передает данные обратно в родительский компонент, но он работает только с кнопкой закрытия диалогового окна, кажется, что еслиВы щелкаете за пределами диалогового окна, оно думает, что вы хотите отменить и полностью забыть данные.

, поскольку это кнопка, похожая на, которую пользователь, вероятно, хочет прочитать, а затем лайкнуть и закрыть ее самым простым способом.(щелкнув за пределами поля).

Я думаю, что ответ на мою проблему связан со следующим кодом

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

, но я не знаю, кто яотсутствует.

Answer 1

Что касается дизайна материала, нажатие вне диалогового окна аналогично нажатию клавиши escape, и оба эквивалентны операции отмены, поэтому изменение данных не должно происходить.Пользователи не ожидают, что изменения будут «проталкиваться», если они отменяют свои изменения.

При этом, если вы хотите получить доступ к копии данных в диалоговом окне (а не к «результату» от надлежащего «закрытия»), вы можете использовать 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 2

Ответ был немного другим, чем я ожидал, мой коллега помог мне с этим, у меня уже была функция, которая выполняла бы управление кнопкой «Мне нравится», она меняла цвет кнопки и добавляла 1 к счетчику.и т.д., что мне нужно было, чтобы в этой же функции был вызван метод внутри службы, который сделал бы http-запрос на изменение всего, теперь в модели реализована логика позади кнопки like, поэтому, когда http-запрос ищетесли он возвращает модель, которая уже возвращает правильный вывод, этот метод лучше, потому что он немедленно обновляет представление как для диалогового окна, так и для родительского компонента.

Я все еще верю, что есть способ сделать то же самоес помощью диалоговых окон, но это не обязательно.

вот функция, которую я упомянул:

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

}

это неполно, там есть куча функций, но это основная идея, так мой кодработает лучше, чем я на самом деле намеревался, и я придерживаюсь этой практики и следую архитектуре, которую мы реализуем, спасибо за ваши ответы.

Answer 3

Попробуйте добавить это

VisualizePublicationComponent

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

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

Где this.resultData - это данные, которые вы хотите вернуть в родительский компонент.Я пробовал это, и это работает для esc и background click.Надеюсь, это поможет.