Как вернуть данные из 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
}