Angular Material弹窗首次加载对齐异常问题排查与解决

首次点击按钮打开Angular Material弹窗时出现对齐异常，再次点击则显示正常。相关代码如下：

openDialog(templateRef: TemplateRef<HTMLAllCollection>) {
    this.addClinicDialogRef = this.dialog.open(templateRef, {
        height: '80%',
        width: '80%',
        panelClass: ['add-clinic-dialog'],
    });
}

请问该如何解决此问题？是否需要添加延迟或采用刷新机制？

解决方案 #

这种问题大多是弹窗初始化时DOM未完全渲染，导致Material的位置计算出错，不用盲目加延迟，试试以下几种方法：

1. 强制更新弹窗位置 #

弹窗打开后直接调用updatePosition()方法，让Material重新计算布局：

openDialog(templateRef: TemplateRef<HTMLAllCollection>) {
    this.addClinicDialogRef = this.dialog.open(templateRef, {
        height: '80%',
        width: '80%',
        panelClass: ['add-clinic-dialog'],
    });
    // 触发位置重计算
    this.addClinicDialogRef.updatePosition();
}

2. 利用弹窗钩子延迟更新 #

如果弹窗内有动态加载的内容，用afterOpened()钩子配合微任务延迟，等DOM渲染完成后再更新位置：

openDialog(templateRef: TemplateRef<HTMLAllCollection>) {
    this.addClinicDialogRef = this.dialog.open(templateRef, {
        height: '80%',
        width: '80%',
        panelClass: ['add-clinic-dialog'],
    });

    this.addClinicDialogRef.afterOpened().subscribe(() => {
        // 0延迟让浏览器先完成DOM渲染
        setTimeout(() => {
            this.addClinicDialogRef.updatePosition();
        }, 0);
    });
}

3. 排查自定义样式冲突 #

检查你自定义的add-clinic-dialog样式类，避免设置position、margin、transform这类会干扰Material弹窗默认定位的属性，比如不要给弹窗容器加position: absolute。

4. 修正模板引用类型 #

代码里的TemplateRef<HTMLAllCollection>不恰当，HTMLAllCollection是过时的DOM类型，建议改成TemplateRef<any>或更贴合实际的类型，避免类型问题引发的渲染异常。

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