Angular如何不渲染子对话框组件模板即可正确实现组件间参数传递

你当前的写法错误是直接将弹窗组件<app-dialog-form-update>写在了父组件表格的单元格模板中，因此每一行表格都会渲染该子组件的模板内容，这就是你看到子组件提前显示的核心原因。Angular Material 的 Dialog 组件不需要提前在父模板中声明，调用MatDialog.open时会动态创建组件实例，你只需要在打开弹窗时传入ID参数即可。

修改步骤 #

第一步：修改父组件模板 #

删除表格action列里的<app-dialog-form-update>标签，同时给更新按钮的点击事件传递当前行的设备ID：

<!-- 仅保留actions列的两个按钮，删除子组件标签 -->
<td mat-cell *matCellDef="let element">
  <button class="pos-l-50 m-r-10" mat-raised-button color="accent" (click)="UpdateEquipment(element.equipmentsID)" >Update</button>
  <button  class="pos-l-50" mat-raised-button color="warn">Delete</button>
</td>

第二步：修改父组件业务逻辑 #

首先删除构造函数中多余的DialogFormUpdateComponent注入，然后修改UpdateEquipment方法，打开弹窗时通过data参数传递ID：

// 构造函数修改，删掉多余的DialogComponentUpdate注入
constructor(
  private EquipmentService: EquipmentsService, 
  public dialog: MatDialog
) { }

// 修改UpdateEquipment方法
public UpdateEquipment(equipId: number): void {
  const dialogRef = this.dialog.open(DialogFormUpdateComponent,{
    minWidth: '300px', 
    disableClose: true,
    // 这里传参数给弹窗组件
    data: { id: equipId }
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
    this.EquipmentService.Getall().subscribe(result => {
      this.dataSource.data = result as Equipments[];
    });
  });
}

第三步：修改子组件接收参数的逻辑 #

删除原有的@Input() Id!: number声明，改为通过MAT_DIALOG_DATA接收弹窗传入的ID，需要先导入对应依赖：

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

export class DialogFormUpdateComponent implements OnInit {
  public titleForm!: string;
  public form!: FormGroup;
  equip!: Equipments;
  // 删掉@Input，改为声明id变量
  id!: number;

  constructor(
    public dialogRef: MatDialogRef<DialogFormUpdateComponent>, 
    @Inject(MAT_DIALOG_DATA) public data: any,
    private fb: FormBuilder,
    private EquipmentService: EquipmentsService
  ) {
    // 从传入的data中取出ID
    this.id = data.id;
  }

  ngOnInit(): void {
    console.log(this.id); // 可以正常拿到ID
    // 后续原有逻辑不变，把原来的this.Id换成this.id就行
    this.EquipmentService.GetWithId(this.id).subscribe(result => {
      this.titleForm = "Update Equipment";
      this.form = this.fb.group({
        name: [result.name, [Validators.required]],
        serialNumber: [result.serialNumber, [Validators.required]],
        voltage: [result.voltage, [Validators.required]],
        electricCurrent: [result.electricCurrent, [Validators.required]],
        oil: [result.oil, [Validators.required]],
        date: [result.date, [Validators.required]],
      });
    });
  }

  // 后续SendFormUpdate、Cancel方法不需要改动
}

修改完成后子组件只有在点击更新按钮打开弹窗时才会被创建渲染，不会提前出现在表格行中，参数也可以正常传递。

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