求助：Angular Material弹窗点击按钮不关闭时向父组件传值方法

步骤1：在弹窗组件（AddUserComponent）中定义输出事件 #

在adduserComponent.ts里通过@Output和EventEmitter创建一个输出事件，用来向父组件发射数据：

import { Component, Output, EventEmitter } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-add-user',
  templateUrl: './add-user.component.html',
  styleUrls: ['./add-user.component.css']
})
export class AddUserComponent {
  // 定义输出事件，用于传递数据到父组件
  @Output() sendUserData = new EventEmitter<any>();

  // 弹窗内的表单数据示例
  userInfo = {
    name: '',
    email: ''
  };

  constructor(public dialogRef: MatDialogRef<AddUserComponent>) { }

  // 点击按钮时触发数据传递
  passDataToParent() {
    // 发射当前表单数据
    this.sendUserData.emit(this.userInfo);
    // 不调用dialogRef.close()，弹窗保持打开状态
  }
}

步骤2：在父组件中监听弹窗的输出事件 #

修改parentComponent.ts，打开弹窗后获取组件实例，订阅输出事件来接收数据：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { AddUserComponent } from './add-user/add-user.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  constructor(private dialog: MatDialog) { }

  addUser() {
    const dialogRef = this.dialog.open(AddUserComponent, {
      width: '350px'
    });

    // 获取弹窗组件实例，监听输出事件
    const popupInstance = dialogRef.componentInstance;
    popupInstance.sendUserData.subscribe((receivedData) => {
      // 处理从弹窗传来的数据，比如打印或保存到父组件变量
      console.log('弹窗传递的数据：', receivedData);
    });
  }
}

步骤3：在弹窗模板中添加触发按钮 #

在adduserComponent.html里添加绑定了传递方法的按钮，同时保留单独的关闭按钮（可选）：

<!-- 弹窗内的表单示例 -->
<div class="form-group">
  <label>姓名</label>
  <input [(ngModel)]="userInfo.name" type="text">
</div>
<div class="form-group">
  <label>邮箱</label>
  <input [(ngModel)]="userInfo.email" type="email">
</div>

<!-- 触发数据传递的按钮 -->
<button (click)="passDataToParent()">传递数据给父组件</button>
<!-- 单独的关闭弹窗按钮 -->
<button (click)="dialogRef.close()">关闭弹窗</button>

额外说明 #

如果需要实时同步数据（比如用户输入时立刻传递），可以把emit逻辑绑定到输入框的input事件上，不用只依赖按钮点击。

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