如何从被调用组件访问MatDialogConfig？SPA中传递配置方法咨询

完全可行！下面分步骤给你讲清楚怎么实现：

1. 调用Dialog时传递MatDialogConfig #

在父组件中，你可以创建并配置MatDialogConfig实例，然后在调用dialog.open()时传入它。这里既可以设置通用配置（比如宽高、位置），也可以通过data属性传递自定义数据给弹窗组件：

import { Component } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { YourDialogComponent } from './your-dialog/your-dialog.component';

@Component({
  selector: 'app-parent',
  template: `<button (click)="openDialog()">打开弹窗</button>`
})
export class ParentComponent {
  constructor(private dialog: MatDialog) {}

  openDialog(): void {
    // 创建并配置MatDialogConfig
    const dialogConfig = new MatDialogConfig();
    dialogConfig.width = '500px';
    dialogConfig.height = '300px';
    dialogConfig.position = { top: '20px', right: '20px' };
    // 传递自定义数据到弹窗组件
    dialogConfig.data = {
      title: '自定义标题',
      message: '这是从父组件传来的数据'
    };

    // 打开弹窗并传入配置
    const dialogRef = this.dialog.open(YourDialogComponent, dialogConfig);
  }
}

2. 在弹窗组件中访问MatDialogConfig #

有两种常用方式可以访问配置信息：

方式一：注入MAT_DIALOG_DATA获取自定义数据 #

如果只需要访问config.data里的自定义内容，直接注入MAT_DIALOG_DATA即可，这是最常用的方式：

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

@Component({
  selector: 'app-your-dialog',
  template: `
    <h2>{{ data.title }}</h2>
    <p>{{ data.message }}</p>
  `
})
export class YourDialogComponent {
  // 注入MAT_DIALOG_DATA获取传递的自定义数据
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
}

方式二：注入MatDialogRef获取完整的MatDialogConfig #

如果你需要访问完整的MatDialogConfig对象（比如宽高、位置等配置项），可以注入MatDialogRef，然后通过它的config属性获取：

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-your-dialog',
  template: `
    <p>弹窗宽度: {{ dialogRef.config.width }}</p>
    <p>弹窗位置: {{ dialogRef.config.position?.top }}</p>
  `
})
export class YourDialogComponent {
  constructor(public dialogRef: MatDialogRef<YourDialogComponent>) {}
}

小提示 #

• 建议为data定义一个专属接口，替代any类型，这样能获得强类型检查，让代码更健壮。
• MatDialogConfig里的样式相关属性（比如backdropClass、panelClass），在组件内部访问后可以用来做动态样式调整。

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