Angular中如何向已打开的模态对话框动态传递更新的输入数据？

注意你的示例代码中打开模态框时传入的组件和主组件同名，建议区分开主组件和模态框组件，避免逻辑冲突，以下方案默认模态框组件为UserProfileModalComponent

以下是针对Angular Material Dialog场景的3种可落地实现方案：

方案1：响应式数据流（推荐） #

基于RxJS的BehaviorSubject实现数据自动同步，无需手动管理组件引用，适配复杂场景：

• 主组件中定义可观测的选中项状态：

import { BehaviorSubject } from 'rxjs';

// 主组件内
// 声明响应式存储，泛型替换为你实际的Item数据类型
private selectedItemSub = new BehaviorSubject<Item>(null);
selectedItem$ = this.selectedItemSub.asObservable();

// 键盘导航切换选中项时更新状态
@HostListener('window:keydown', ['$event'])
handleKeyEvent(event: KeyboardEvent) {
  // 原有列表项切换逻辑，得到新的选中项newItem
  this.selectedItemSub.next(newItem);
}

// 打开模态框时传入可观测对象
openModal() {
  const dialogRef = dialog.open(UserProfileModalComponent, {
    data: {
      item$: this.selectedItem$
    }
  });
}

• 模态框中订阅数据流，可直接用async管道省去手动订阅和销毁逻辑：

// 模态框组件内
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}

模态框模板直接绑定：

<div *ngIf="data.item$ | async as currentItem">
  <!-- 渲染currentItem的详情信息 -->
  <p>{{ currentItem.name }}</p>
  <p>{{ currentItem.desc }}</p>
</div>

如果需要在组件类中处理新数据，手动订阅后记得在ngOnDestroy中取消订阅避免内存泄漏

方案2：直接操作模态框实例（轻量场景首选） #

通过保存dialogRef引用，直接修改模态框组件实例的属性，实现最简单：

• 主组件保存模态框引用，切换选中项时同步更新：

// 主组件内
private dialogRef: MatDialogRef<UserProfileModalComponent> | null = null;
currentItem: Item;

// 打开模态框时保存引用
openModal() {
  this.dialogRef = dialog.open(UserProfileModalComponent, {
    data: { item: this.currentItem }
  });
  // 模态框关闭后清空引用
  this.dialogRef.afterClosed().subscribe(() => {
    this.dialogRef = null;
  });
}

// 键盘切换选中项时同步更新模态框数据
@HostListener('window:keydown', ['$event'])
handleKeyEvent(event: KeyboardEvent) {
  // 原有切换逻辑得到newItem
  this.currentItem = newItem;
  // 模态框开启时直接更新实例属性
  if (this.dialogRef) {
    this.dialogRef.componentInstance.currentItem = newItem;
    // 若模态框用了OnPush变更检测策略，主动触发更新
    this.dialogRef.componentInstance.changeDetectorRef.markForCheck();
  }
}

• 模态框内直接声明currentItem属性即可接收数据：

// 模态框组件内
import { ChangeDetectorRef } from '@angular/core';

currentItem: Item;
constructor(public cdr: ChangeDetectorRef) {}

方案3：共享服务（多组件共享场景适用） #

如果项目中多处需要用到当前选中项数据，可创建一个单例服务做状态管理：

// item-select.service.ts
@Injectable({ providedIn: 'root' })
export class ItemSelectService {
  private selectedItemSub = new BehaviorSubject<Item>(null);
  selectedItem$ = this.selectedItemSub.asObservable();

  updateSelectedItem(item: Item) {
    this.selectedItemSub.next(item);
  }
}

主组件切换选中项时调用itemSelectService.updateSelectedItem(newItem)，模态框注入服务订阅selectedItem$即可。

可选优化 #

如果不需要模态框开启时后台还能切换列表选中项，可在HostListener逻辑中加判断，模态框开启时拦截键盘事件：

@HostListener('window:keydown', ['$event'])
handleKeyEvent(event: KeyboardEvent) {
  // 模态框开启时不处理导航按键
  if (this.dialogRef) return;
  // 原有切换逻辑
}

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