Angular中如何通过MatDialog实现点击图片放大展示

云原生阿岚

2026-9-1

MatDialog 跨组件传递图片实现放大弹窗

实现只需要三步，直接修改对应代码即可：

调整主组件openImage方法，打开弹窗时通过配置项的data字段传入当前图片地址

openImage(){
this.dialog
  .open(DialogExpandImageComponent, {
    data: {
      currentImage: this.image
    },
    // 可选配置：自定义弹窗宽度、面板类等
    maxWidth: '95vw'
  })
  .afterClosed()
  .subscribe(() => console.log("test successful"))
}

修改弹窗组件TS代码，注入官方提供的MAT_DIALOG_DATA令牌接收传入的图片参数

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

@Component({
  selector: 'app-dialog-expand-image',
  templateUrl: './dialog-expand-image.component.html',
  styleUrls: ['./dialog-expand-image.component.scss'],
})
export class DialogExpandImageComponent {
  constructor(
    public dialogRef: MatDialogRef<DialogExpandImageComponent>,
    // 接收主组件传递的参数
    @Inject(MAT_DIALOG_DATA) public dialogData: { currentImage: string }
  ) {}

  closeImage() {
    this.dialogRef.close();
  }
}

替换弹窗组件原来的测试文本，渲染传入的图片
弹窗HTML代码参考：

<div class="image-modal-wrap" (click)="closeImage()">
  <img [src]="dialogData.currentImage" alt="放大预览图" class="preview-img">
</div>

配套样式可以按需编写，保证图片显示正常：

.image-modal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 12px;
}
.preview-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}