Возможно ли иметь обещание связи между компонентами? - PullRequest
0 голосов
/ 22 сентября 2019

Пример воссозданного Stackblitz

У меня есть два компонента: componentN (это может быть много разных компонентов, которые реализуют одну и ту же функцию) и componentButton, которые используются в одном шаблоне родительского компонента.

<div>
  <component1></componentN>
  <componentButton></componentButton>
</div>

ComponentN

someFunction: boolean (){ }

ComponentButton

buttonClicked(){ /** Wait for response of other component before doing other stuff */ }

У Component2 есть кнопка, для которой я хочу вызвать функцию из ComponentN, дождаться ответа от нее,Чтобы решить эту проблему, я создал общий сервис с субъектами поведения и Observables

Сервис

  buttonClicked = false;
  functionResponse = false;

  private buttonClickedSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(this.buttonClicked);
  buttonClickedObservable: Observable<boolean> = this.buttonClickedObservable.asObservable();

  private functionResponseSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(this.functionResponse);
  functionResponseObservable: Observable<boolean> = this.functionResponseSubject.asObservable();

  clickedButton() {
    buttonClickedSubject.next(true);
  }


  functionRespone(response) {
    functionResponseSubject.next(response);
    resetValues();
  }

ComponentButton, вызывающий service.clickedButton() при нажатии кнопки, затем подпишитесь на functionResponseObservable для обработкиответ.

ComponentN подписывается на buttonClickedObservable, когда true вызывает функцию и отправляет ответ service.functionResponse.

Это работает , но должно обрабатывать в ComponentButton подписку наигнорируйте первое значение (false) и второе, чтобы быть реальным ответом.Я чувствую, что это очень хрупкое и не лучшее или даже хорошее решение.Я хотел бы иметь что-то более похожее на это в ComponentButton:

buttonClicked(){
    service.clickedButton().then(doOtherStuffWithResponse);
}

, но это зависает в сервисе:

clickedButton: Promise<boolean>(){
    // How to call the components function here withoout having to emit to subscribers of an observable?
}

Все это, чтобы задать мой настоящий вопрос,есть ли способ связи между двумя компонентами, подобный этому, с помощью Promise против ретрансляции на наблюдаемые?

Вот пример: Воссозданный пример Stackblitz

...