Angular MatDialog打开组件时如何传入@Input()参数

首先明确核心前提：MatDialog的open()方法本身默认走的是独立的组件实例创建流程，不会自动触发普通父子组件间的@Input绑定链路，如果要让弹窗组件保留常规的@Input接收参数的写法，可按照以下步骤实现：

1. 弹窗组件侧：按常规写法定义@Input属性 #

和普通业务组件的写法完全一致，不需要为了弹窗适配额外改造@Input的逻辑：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-my-dialog',
  template: `
    <div>传入的弹窗标题：{{dialogTitle}}</div>
    <div>传入的业务数值：{{passValue}}</div>
  `
})
export class MyDialogComponent {
  // 常规@Input定义，可搭配默认值、类型校验
  @Input() dialogTitle: string = '默认弹窗标题';
  @Input() passValue: number = 0;
}

2. 调用侧：实现@Input的参数传递 #

分两种兼容场景，可根据项目的Angular Material版本选择：

兼容所有旧版本Angular Material的通用实现 #

不需要依赖新版本特性，直接通过MatDialog暴露的组件实例完成@Input赋值：

import { MatDialog } from '@angular/material/dialog';
import { MyDialogComponent } from './my-dialog/my-dialog.component';

@Component({
  selector: 'app-parent-page',
  template: `<button (click)="openTargetDialog()">打开弹窗</button>`
})
export class ParentPageComponent {
  // 注入MatDialog服务
  constructor(private dialog: MatDialog) {}

  openTargetDialog() {
    // 1. 正常调用open方法配置弹窗通用属性，比如宽度、是否禁止遮罩点击关闭等
    const dialogRef = this.dialog.open(MyDialogComponent, {
      width: '520px',
      disableClose: true,
      panelClass: 'custom-dialog-container'
    });

    // 2. 直接拿到弹窗的组件实例，给对应的@Input属性赋值
    // 属性名必须和弹窗组件里定义的@Input名称完全匹配
    const dialogComponent = dialogRef.componentInstance;
    dialogComponent.dialogTitle = '从父页面传入的弹窗标题';
    dialogComponent.passValue = 10086;
  }
}

新版本（Angular Material 15.2+）原生支持的写法 #

高版本的MatDialog已经补充了inputBindings配置项，不需要手动获取组件实例赋值，和普通组件的绑定体验完全一致：

openTargetDialog() {
  this.dialog.open(MyDialogComponent, {
    width: '520px',
    inputBindings: {
      dialogTitle: '原生配置传入的弹窗标题',
      passValue: 10010
    }
  });
}

常见踩坑提醒 #

• 不要混淆MatDialog的data配置和@Input的区别：如果只在open方法里传data: {xxx: 'xxx'}，弹窗组件必须通过@Inject(MAT_DIALOG_DATA)依赖注入才能拿到值，不会自动赋值给组件的@Input属性。如果要兼容@Input写法，除了实例赋值/inputBindings的方式，也可以在弹窗组件内部手动做桥接，把注入的data值同步给对应的@Input属性，否则会出现@Input值始终为初始默认值的问题。
• 如果是异步获取参数后再打开弹窗，要等异步值拿到后再调用open方法并完成@Input赋值，不要在赋值前就触发弹窗的视图检测，避免出现模板渲染时拿不到最新参数的问题。

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