-2

如何获取 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

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

如何在Angular 6的Angular Material Dialog中将数据传递给afterClosed（）

将几个数据从 Mat Dialog Angular 4 传回给父级

4

1 回答 1

0

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

  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()–</p>

于 2020-07-09T08:01:13.170 回答