Angular Material Dialog弹窗先空白后加载文本问题求助

1. 移除Bootstrap Modal类与MatDialog的冲突 #

你的Dialog组件HTML中混用了Bootstrap的modal/modal-fade等类，但MatDialog本身已经提供了完整的弹窗DOM结构和样式系统，两者叠加会导致渲染优先级冲突，直接引发文本延迟显示的问题。

修改Dialog HTML，移除Bootstrap相关类，改用自定义结构：

<div class="custom-dialog">
  <div class="dialog-header">
    <h5 class="dialog-title">{{ infoMessage }}</h5>
  </div>
  <div class="dialog-footer">
    <button type="button" class="btn modal-btn close-btn" (click)="dialogRef.close()">Close</button>
  </div>
</div>

同时添加自定义样式替代Bootstrap的modal效果：

.custom-dialog {
  width: 500px;
}
.dialog-header {
  padding: 16px 24px;
  border-bottom: 1px solid #eee;
}
.dialog-title {
  margin: 0;
  font-size: 18px;
}
.dialog-footer {
  padding: 16px 24px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
}

2. 手动触发变更检测（冲突解决后仍有延迟时） #

Electron环境中，Angular的变更检测可能因渲染机制差异没有及时触发，导致数据绑定延迟。可以通过ChangeDetectorRef手动触发：

修改Dialog组件代码：

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

export class MyDialogComponent {
  public infoMessage: string;

  constructor(
    @Inject(MAT_DIALOG_DATA) private data: any,
    private dialogRef: MatDialogRef<MyDialogComponent>,
    private cdr: ChangeDetectorRef
  ) {
    if (data) {
      this.infoMessage = data.message;
      this.cdr.detectChanges(); // 强制触发变更检测
    }
  }

  public static getConfig(): any {
    return {
      width: '500px',
      height: 'auto',
      disableClose: true,
      panelClass: 'dialog-info',
      backdropClass: 'dialog-info-bg'
    };
  }
}

3. 排查自定义面板类的样式问题 #

检查你的dialog-info自定义面板类是否设置了初始透明、隐藏的过渡动画，这类样式会导致内容延迟显示。确保样式默认状态下内容可见：

.dialog-info {
  opacity: 1 !important;
  visibility: visible !important;
  /* 移除可能存在的延迟过渡 */
  transition: none !important;
}

内容的提问来源于stack exchange，提问作者NickAth