Angular 素材对话框不显示数据（bug）

Question

我试图重用相同的组件对话框，但我无法解决这个问题。 我使用 angular v.12

我创建了一个从组件调用的 DialogService，并将数据发送给他。 DialogService 打开一个包含给定数据的对话框。 这个方法的第一次调用很好，我得到了想要的数据和操作的对话框，但是彼此的请求都是一个问题。 这是一个空对话框，没有数据和任何操作。

对话框组件.ts

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-confirm-mobile',
  templateUrl: './confirm-mobile.component.html',
  styleUrls: ['./confirm-mobile.component.css']
})
export class ConfirmMobileComponent implements OnInit {

  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private mdDialogRef: MatDialogRef<ConfirmMobileComponent>) { }

  ngOnInit(): void { }

  public cancel() {
    this.close(false);
  }

  public close(value) {
    this.mdDialogRef.close(value);
  }

  public confirm() {
    this.close(true);
  }
}

对话组件.html

<h1 mat-dialog-title>{{data.title}}</h1>
<div mat-dialog-content>{{data.contentBefore}} <code>{{data.code}}</code>{{data.contentAfter}}</div>
<div mat-dialog-actions>
    <button mat-button *ngIf="data.showButtonClose" (click)="cancel()">{{data.textButtonClose}}</button>
    <button mat-button *ngIf="data.showButtonOk" (click)="confirm()">{{data.textButtonOk}}</button>
</div>

对话服务.ts

import { Injectable } from '@angular/core';
import { MatDialogModule, MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';
import { ConfirmMobileComponent } from 'src/app/dialogs/confirmDialogs/confirm-mobile/confirm-mobile.component';

@Injectable({
  providedIn: 'root'
})
export class DialogServiceService {

  constructor(public dialog: MatDialog, private dialogRef: MatDialogRef<ConfirmMobileComponent>) { }

  public open(data: any) {

    this.dialogRef = this.dialog.open(ConfirmMobileComponent, { data, width: '400px', disableClose: true });
  }

  public confirmed(): Observable<any> {
    return this.dialogRef.afterClosed().pipe(take(1), map(result => {
      return result;
    }))
  }

  ngOnDestroy(): void {
  }
}

名为 DialogService 的组件

  this.dialogService.open({
              "title": title,
              "contentBefore": contentBefore,
              "code": code,
              "contentAfter": contentAfter,
              "showButtonClose": showButtonClose,
              "showButtonOk": showButtonOk,
              "textButtonClose": textButtonClose,
              "textButtonOk": textButtonOk
            });
    
            this.dialogService.confirmed().subscribe(result => {
              console.log('Response first dialog');
              console.log(result); //it's well result
             
              //here call the new method
            })

第一次通话的结果

确认手机后，向后端发送请求进行检查。 在后端响应中，我再次打开了相同的对话框，但数据不同。

调用第二次对话框

//call dialog for second time
        this.dialogService.open({
          "title": title,
          "contentBefore": contentBefore,
          "code": code,
          "contentAfter": contentAfter,
          "showButtonClose": showButtonClose,
          "showButtonOk": showButtonOk,
          "textButtonClose": textButtonClose,
          "textButtonOk": textButtonOk
        } as ConfirmDialog);

        this.dialogService.confirmed().subscribe(result => {
          console.log('Response secound dialog');
          console.log(result);
        })

第二次调用的结果（如您所见，我从方法的订阅部分调用的第二个操作（API 响应））

现在，如果我触摸检查元素 window，（很少移动到底部或顶部）我会得到想要的结果。

任何人都可能知道问题出在哪里？

Answer 1

这个解决方案对我有用：

import { NgZone } from '@angular/core';

export class AppComponent {
  constructor(private zone: NgZone) {}


  private openDialog() {
    this.zone.run(() => {
      this.dialog.open(ConfirmMobileComponent, { data, width: '400px', disableClose: true });
    });
  }