如何将可观察性从角度底板传递到父组件

Question

我需要将数据从angular material bottomsheet传递到它的父组件。

就像我们在angular material对话框组件中有[mat-dialog-close]指令一样，我们可以像https://material.angular.io/components/dialog/api#MatDialogClose中提到的那样将数据从对话框传递到父对话框

对话html：

<button [mat-dialog-close]="'dataWhichNeedsToBePassed'" cdkFocusInitial>Ok</button>

并在父组件中接收为：

dialogRef.afterClosed().subscribe(result => {
  console.log(result); //dataWhichNeedsToBePassed
});

类似地，我需要将数据从bottomsheet传递到父组件(从调用bottomsheet的位置)。

看起来https://material.angular.io/components/bottom-sheet/api中没有预定义的指令

这里最好的解决方案是什么？

Answer 1

我从.dismiss()函数中得到了答案。只需传递来自此dismiss函数的数据

bottomsheet.html：

<button (click)="confirmDelete()">Delete<button>

bottomsheetComponent：

confirmDelete(): void {
  this._bottomSheetRef.dismiss('Deleted');
  event.preventDefault();
}

父组件：

MatBottomSheetRef.afterDismissed().subscribe(result => {
  console.log('bottomsheet was closed');
  console.log(result); //Deleted
});

Answer 2

您可以以与mat对话框相同的方式使用它

this._bottomSheet.open(BottomSheetOverviewExampleSheet)
.afterDismissed().subscribe((result) => {
   console.log(result);
   console.log('Bottom sheet has been dismissed.');
 }); 

示例：stackblitz