Angular子弹窗组件保存按钮EventEmitter传值失效问题求助

• 父页面点击按钮打开弹窗形式的子组件
• 子组件保存数据后，将数据传递给父组件
• 使用EventEmitter传值时，ngOnInit中的emit可正常触发，但子组件保存按钮触发的emit无效

父组件HTML代码 #

<parentComponent>
 <app-upsert-service-pop-up *ngIf="this.AddService [childProperty]="this.parentProperty"
  (onInitEvent)="receiveAutoMsgHandler($event)"
  (savedService)="serviceChangedHandler($event)">
 </app-upsert-service-pop-up>
</parentComponent>

父组件TS代码 #

serviceChangedHandler(data: any) {
  console.log("Data from CHild component--");
  this.childServiceDataChange = data;
  console.log("Data from CHild component--", data);
}
receiveAutoMsgHandler(p) {
  this.msgOnChildCompInit = p;
  console.log(p);
}

子组件TS代码 #

@Output() savedService = new EventEmitter();
@Output() onInitEvent = new EventEmitter();

ngOnInit() {
  this.onInitEvent.emit('This meesage is appeared automatically as the child component will intialized. This message is defined in the child component ngOninit method');
}

onSaveServerDetails() {
  this.savedService.emit('After saving data');
}

1. 修复父组件模板语法错误 #

父组件HTML存在语法问题，会导致事件绑定无法被正确解析：

• Angular模板中无需用this.引用组件属性，直接写属性名即可
• *ngIf表达式未闭合，且与属性绑定指令之间缺少空格

修正后的父组件HTML：

<parentComponent>
 <app-upsert-service-pop-up 
  *ngIf="AddService"
  [childProperty]="parentProperty"
  (onInitEvent)="receiveAutoMsgHandler($event)"
  (savedService)="serviceChangedHandler($event)">
 </app-upsert-service-pop-up>
</parentComponent>

2. 检查子组件保存按钮的事件绑定 #

确认子组件的保存按钮已正确绑定onSaveServerDetails方法，子组件HTML需包含类似代码：

<button (click)="onSaveServerDetails()">保存</button>

若未绑定点击事件，onSaveServerDetails方法不会执行，自然无法触发savedService.emit。

3. 适配动态弹窗的传值逻辑 #

如果弹窗是通过MatDialog（Angular Material）或其他动态弹窗组件创建的（而非*ngIf静态渲染），静态声明的@Output事件绑定会失效——因为弹窗组件是动态挂载到DOM中的，不属于父组件模板的一部分。

这种情况下需通过弹窗的关闭回调传值：

• 子组件注入MatDialogRef，关闭时传递数据：

import { MatDialogRef } from '@angular/material/dialog';

constructor(private dialogRef: MatDialogRef<UpsertServicePopUpComponent>) {}

onSaveServerDetails() {
  // 完成保存逻辑后
  this.dialogRef.close('After saving data');
}

• 父组件通过afterClosed()订阅接收数据：

import { MatDialog } from '@angular/material/dialog';
import { UpsertServicePopUpComponent } from './upsert-service-pop-up/upsert-service-pop-up.component';

constructor(private dialog: MatDialog) {}

openServicePopup() {
  const dialogRef = this.dialog.open(UpsertServicePopUpComponent, {
    data: { parentProperty: this.parentProperty } // 传递父组件数据给子组件
  });

  dialogRef.afterClosed().subscribe(data => {
    if (data) {
      this.serviceChangedHandler(data);
    }
  });
}

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