如何在Angular可复用模态对话框中展示不同输入字段的数据

解决方案 #

1. 修改模板中的点击事件，传入对应要展示的数据

给两处openDialog调用传入对应位置的数据源，可根据实际展示需求调整传入字段：

<!-- 第一处：标准名称旁的language图标 -->
<mat-icon style="margin-left: 0.5rem; margin-top: 0.6rem; font-size: 2rem;cursor: pointer;" (click)="openDialog({title: '标准多语言名称', content: foodModel.standardName, list: foodModel.localisedName})">language</mat-icon>

<!-- 第二处：表格行内的language图标 -->
<mat-icon style="margin-left: 0.6rem;" (click)="openDialog({title: '餐食多语言名称', content: food.localisedName | head, list: food.localisedName})">language</mat-icon>

2. 修改组件的openDialog方法，接收参数并传给模态框

调整openDialog逻辑，支持传入自定义数据，同时关闭已打开的模态框实现新内容替换旧内容的效果：

openDialog(passData: any){
  // 关闭已存在的模态框，避免叠加展示
  if (this.dialog.openDialogs.length) {
    this.dialog.closeAll();
  }
  const dialogRef = this.dialog.open(ModalAllComponent, {
    width: '14.5rem',
    data: passData
  })
}

3. 调整模态组件ModalAllComponent接收并展示数据

首先在模态组件TS文件中注入MAT_DIALOG_DATA获取传入参数：

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

@Component({
  selector: 'app-modal-all',
  templateUrl: './modal-all.component.html',
  styleUrls: ['./modal-all.component.scss']
})
export class ModalAllComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public modalData: any) { }
}

然后在模态组件模板中动态渲染内容即可，示例：

<h3>{{ modalData.title }}</h3>
<p>当前值：{{ modalData.content }}</p>
<!-- 有多语言列表时可遍历展示 -->
<div *ngIf="modalData.list?.length">
  <p>全部多语言配置：</p>
  <div *ngFor="let item of modalData.list">
    {{item.lang || item.code}}: {{item.value}}
  </div>
</div>

后续有其他位置需要复用该模态框时，只需调用openDialog时传入对应格式的数据即可，无需修改模态组件核心逻辑。

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