如何将数据从 MatBottomSheet 返回到其父组件？

Question

我有一个带有输入字段的底部表格和两个按钮提交和取消。

父组件 HTML

<div class="something" (click)="openBottomSheet()"></div>

父组件 TS

import { MatBottomSheet } from "@angular/material";


constructor(private bottomsheet: MatBottomSheet) { }

openBottomSheet(): void {
   this.bottomsheet.open(BottomsheetComponent);
}

BottomSheet 组件 HTML

<mat-form-field>
  <input type="password" matInput placeholder="Password" [formControl]="password">
</mat-form-field>
<button mat-button  (click)="closeBottomSheet()">Cancel</button>
<button mat-button  (click)="checkPassword()">Confirm Password</button>

BottomSheet 组件 TS

import { MatBottomSheetRef } from "@angular/material";

constructor(private bottomsheet: MatBottomSheetRef<BottomsheetComponent>){}

closeBottomSheet(){
  this.bottomsheet.dismiss();
}

checkPassword(){
  //Here I need to pass data to parent component
}

在输入字段中，用户将输入数据，单击提交时将完成网络调用，如果它返回响应 200，那么我需要将一个布尔值从底部表返回到其父组件。\

我怎样才能实现上述目标？

我会像使用组件一样使用 @Output() 来做到这一点，如果是，如何在底部表中使用它？

Answer 1

您可以使用底部工作表参考及其提供的可观察对象。我使用了内联注释来获取更多详细信息。

您可以在此处找到有关底部工作表的更多详细信息 - https://material.angular.io/components/bottom-sheet/overview

// Parent component
import { MatBottomSheet } from "@angular/material";


constructor(private bottomsheet: MatBottomSheet) { }

openBottomSheet(): void {
// Take refernce of bottom sheet
   const bottomSheetRef = this.bottomsheet.open(BottomsheetComponent);
   
   // subscribe to observable that emit event when bottom sheet closes
   bottomSheetRef.afterDismissed().subscribe((dataFromChild) => {
  console.log(dataFromChild);
});
}

// Child component
import { MatBottomSheetRef } from "@angular/material";

constructor(private bottomsheet: MatBottomSheetRef<BottomsheetComponent>){}

closeBottomSheet(){
  //  pass the data to parent when bottom sheet closes.
  this.bottomsheet.dismiss(data);
}

checkPassword(){
  //Here I need to pass data to parent component
}