材质对话框弹出空白，然后显示字母

Question

我在电子应用程序中使用角度9.1.13和材料9.2.4。我注意到有关 Material Dialog 组件的以下奇怪行为。

当我尝试弹出一个仅包含文本的简单对话框时，该对话框首先弹出为空，并且几毫秒（通常为 300-1000）后，字母显示出来。截图如下：

当我打开对话框时

几毫秒后

弹窗的实现如下：

我的对话框组件

export class MyDialogComponent {
public infoMessage: string;

constructor(
    @Inject(MAT_DIALOG_DATA) private data: any,
    private dialogRef: MatDialogRef<MyDialogComponent>
) {
    if (data) {
        this.infoMessage = data.message;
    }
}

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

我弹出如下所示的对话框：

const config = MyDialogComponent.getConfig();
config.data = {message: 'My text that comes later than pop up'};
this._dialogService.open(MyDialogComponent, config);

其中 _dialogService 是 MatDialog

private _dialogService: MatDialog

MyDialogComponent的Html代码

<div class="modal modal fade">
<div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="message">{{ infoMessage }}</h5>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn modal-btn close-btn">Close
            </button>
        </div>
    </div>
</div>

我在网上搜索了这种奇怪的行为，但尚未找到有关如何处理此问题的任何令人满意的答案，提前致谢

Answer 1

您可能会遇到更改检测问题，具体取决于您在应用程序中执行的其他操作。尝试使用

ChangeDetectorRef

或

NgZone

:

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

或

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

...

export class MyDialogComponent {
public infoMessage: string;

constructor(
    @Inject(MAT_DIALOG_DATA) private data: any,
    private dialogRef: MatDialogRef<MyDialogComponent>,
    private zone: NgZone
) {
    if (data) {
        this.zone.run(() => {
            this.infoMessage = data.message;
        });
    }
}