typescript 如何在关闭子组件弹出页面时再次向父页面发送数据

z9zf31ra  于 2023-03-13  发布在  TypeScript
关注(0)|答案(1)|浏览(120)

我正在努力实现以下目标:
1.在父页面上,点击按钮子组件打开,这是一个弹出窗口
1.在保存子弹出窗口组件的数据后,我需要将数据从子组件传递到父组件。
1.我正在使用Emit()来传递在ngOnInit()上工作的数据,但不是在点击子组件中的保存按钮时。
父组件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);
  }

孩子-

@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');}

onInitEvent-工作正常,但savedServices的类似代码不工作。
我不知道为什么,是因为子组件是pop还是我遗漏了什么?

axr492tv

axr492tv1#

我在其他地方经常使用和看到的模式是让“父”页面向对话框组件传递回调。
然后,当对话框的“提交”按钮被单击时,对话框调用父对话框的回调函数,在它关闭自己之前将数据作为参数发送。

相关问题