Angular15+Material：全局为MatDialog内组件添加类的实现问题

可靠解决方案（规避内置类依赖） #

方案一：全局配置钩子注入类 #

通过全局配置MatDialogConfig，利用对话框打开后的钩子统一为宿主元素添加类，无需修改业务代码：

import { NgModule } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';

@NgModule({
  providers: [
    {
      provide: MatDialogConfig,
      useFactory: () => {
        const config = new MatDialogConfig();
        config.afterOpened.subscribe(dialogRef => {
          // 获取组件宿主元素
          const hostElement = dialogRef.componentInstance?.hostView?.rootNodes[0];
          if (hostElement) {
            hostElement.classList.add('custom-dialog-host');
          }
        });
        return config;
      }
    }
  ]
})
export class DialogGlobalConfigModule {}

将上述模块导入根模块后，所有通过this.dialog.open()打开的对话框都会自动为内部组件宿主元素添加custom-dialog-host类。

方案二：封装自定义对话框服务 #

封装一个全局服务替代原生MatDialog，在统一的open方法中处理类添加逻辑，便于后续扩展：

import { Injectable } from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
import { ComponentType } from '@angular/cdk/portal';

@Injectable({ providedIn: 'root' })
export class CustomDialogService {
  constructor(private dialog: MatDialog) {}

  open<T, D = unknown, R = unknown>(
    component: ComponentType<T>,
    config?: MatDialogConfig<D>
  ): MatDialogRef<T, R> {
    const dialogRef = this.dialog.open(component, config);
    // 为宿主元素添加自定义类
    const hostElement = dialogRef.componentInstance?.hostView?.rootNodes[0];
    if (hostElement) {
      hostElement.classList.add('custom-dialog-host');
    }
    return dialogRef;
  }
}

项目中所有业务代码改用CustomDialogService打开对话框即可实现全局类注入。

不推荐自定义ComponentFactoryResolver的原因 #

ComponentFactoryResolver是Angular内部抽象类，无法直接实例化，自定义实现会依赖Angular内部机制，版本迭代时极易失效，且维护成本高，完全没必要用这种复杂方案解决简单的类注入需求。

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