Angular Material：弹出窗口 Window：在 Window 打开并单击按钮时向父级发送数据

Question

如何获取 Angular Material 对话框的值，并将其发送给父级？

我知道如何在他们关闭对话框后获取数据。只是好奇如何在对话框仍然打开时获取数据，或者特别是当人们在对话框中按下按钮时。

public openPropertySearchDialog(): void {
  const propertySearchDialogRef = this.propertySearchDialog.open(PropertyGridDialogComponent, 
  {
     width: '1500px',
     height: '950px',
     data: this.propertyList,
     hasBackdrop: false
   });
  
   propertySearchDialogRef.afterClosed().subscribe(result => {
     console.log('propertyResult', result);
   });
}

更新：

这将订阅数据。现在我只需要知道在 Dialog 组件中按下 Button 时的数据。考虑为按钮按下事件添加另一个订阅，寻找干净的方式，而不是添加 2 个订阅。

propertySearchDialogRef .componentInstance.propertyOutput.subscribe((data: any) => {
  console.log('test',data);
});

https://material.angular.io/components/dialog/api

许多在线资源都是在 Window 关闭时寻找打开并按下按钮（不关闭对话框）

How to pass data to afterClosed() in Angular Material Dialog in Angular 6

Pass several data from Mat Dialog Angular 4 back to parent

Answer 1

在弹出组件上，您可以使用输出事件发射器。

  onAdd = new EventEmitter();
  constructor() {
    
  }
  
  onButtonClicked() {
    this.onAdd.emit('test');
  }

父组件内部，

  openDialog() {
      const ref = this._dialog.open(InnerComponent);
      const sub = ref.componentInstance.onAdd.subscribe((data) => {
        console.log(data);
      });
      dialogRef.afterClosed().subscribe(() => {
        sub.unsubscribe();
      });
  }

您在这里订阅了 onAdd 事件。

只有在您的按钮上单击按钮时才会发出事件 (click) 事件，调用 onButtonClicked() –

Angular Material：弹出窗口 Window：在 Window 打开并单击按钮时向父级发送数据

Angular Material: Popup Window: Send Data to Parent while Window is Open and Button Click

typescript

angular-material

angular

angular8

material-dialog