Пример воссозданного 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