Как передать данные между Angular Material Bottom Sheet его родителю, используя дополнительный метод

Question

Я реализую Angular Material Bottom Sheet для моего Angular проекта. Вот пример, предоставленный официальным веб-сайтом Angular. Официальная страница StackBlitz

Что я хочу получить:

1. В BottomSheetOverviewExampleSheet Я добавил дополнительную функцию manipulate()
2. После того, как я выполнил Выше функции Я хочу отправить данные от BottomSheetOverviewExampleSheet до BottomSheetOverviewExample

Я не хочу использовать встроенную ссылку BottomSheet, потому что ни один из них не подходит для моего сценария.

Я пытался использовать @Output и EventEmitter, но это не работает.

Можете ли вы предложить какое-нибудь решение, пожалуйста?

В конце я хочу, чтобы на кнопке был значок и я обновил его значок из BottomSheet

ОБНОВЛЕНИЕ:

Вот ссылка на решение, показывающее, что Output с EventEmitter не работает:

Пример с Output и EventEmitter

Answer 1

@Output должны использоваться с отношениями родитель-ребенок, вы можете использовать Общий сервис - лучший вариант для вашей ситуации:

Создать один сервис (Shared.Service.ts ):

import { Injectable } from '@angular/core';
import {Subject} from 'rxjs';

@Injectable()
export class SharedService {
  change =  new Subject<number>();

  constructor() { }

  emitValue(value: number){
    this.change.next(value);
  }
}

Контроллер нижнего листа:

@Component({
  selector: "bottom-sheet-overview-example-sheet",
  templateUrl: "bottom-sheet-overview-example-sheet.html"
})
export class BottomSheetOverviewExampleSheet {
  constructor(
    private _bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>,
    private service: SharedService
  ) { }

  manipulate() {
    console.log("DIV CLICKED");
    this.service.emitValue(99);
  }
}

App.component.ts:

import { Component, Output, EventEmitter } from "@angular/core";
import {
  MatBottomSheet,
  MatBottomSheetRef
} from "@angular/material/bottom-sheet";
import { Subject } from "rxjs";
import { SharedService } from "./shared.service";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  myCount: number = 0;
  constructor(
    private _bottomSheet: MatBottomSheet,
    private sharedService: SharedService
  ) {
    this.sharedService.change.subscribe(value => {
      if (value) {
        console.log(value);
        this.myCount = value;
      }
    });
  }

  openBottomSheet(): void {
    this._bottomSheet.open(BottomSheetOverviewExampleSheet);
  }
}

Here является рабочим демо:)