관찰 가능한 테이크아웃 취소작동하지 않을 때까지
자동 완성 HTTP 호출과 검색 HTTP 호출 실행...실행 작업이 트리거될 때 자동 완성 호출을 중단해야 한다.내가 지금 하고 있는 것은 다음과 같은 주제를 사용하는 것이다.
private onExecute$ = new Subject();
자동 완성 방법:
executeAutoComplete(e) {
this.myService.searchAutoComplete(e.criteria)
.pipe(
takeUntil(this.onDestroy$),
takeUntil(this.onExecute$),
map(
// continue with more code
그리고 내 실행 방법에서 신호를 올린다:
executeSearch(e) {
console.log('triggering onExecute signal');
this.onExecute$.next();
// other code
}
콘솔에서 '실행 신호에 트리거 중'이 표시되지만 전체 검색이 실행된 후 자동 완성 결과가 반환됨 신호를 올리면 체인을 중단할 때까지?그것은 효과가 없다.
따라서 본질적으로 내가 방지하려는 행동은 자동 완성 결과가 더 이상 관련이 없기 때문에 사용자에 의해 검색이 트리거될 때 드롭다운을 열어서는 안 된다는 것이다.
내가 뭘 놓쳤지?
편집 -
순서는 자동 완성 전에 실행이 항상 호출되는 디바운스 시간 때문에 이슈에 영향을 미친다. 순서는 예측할 수 없는 길일 수 있다.관찰 가능한 체인이 아직 활성화되지 않은 경우 onExecute.next()가 손실된다는 것을 알지 못함.
searchLoading 변수도 설정되어 있는데, 이 변수를 사용하려면 어떻게 해야 할까?
나는 노력했다:
takeUntil(Observable.of(this.searchLoading))
이것은 항상 사실이기 때문에 효과가 없다!동적으로 평가되는 부울 값을 사용하여 takePill을 사용하는 방법
편집 2 -
테이크를 사용하여 얻었다.대신:
takeWhile(() => !this.searchLoading))
그럴 수도 있을까?executeSearch
전에 불려지다executeAutoComplete
만약onExecute$
검색 실행을 중지하지 않는 관측 가능한 체인이 구성되기 전에 값을 이미 내보냈다.
그런데, 내가 보기에는 전화를 거는 것이 더 간단할 것 같다.unsubscribe
검색 실행 시 구독에 추가하십시오.
나쁜 소식은 효과가 있다는 거야
네 코드의 이 근사치를 이용해서 결점을 찾으려고 했는데 아쉽게도 못 찾겠어.
누군가에게 유용할 경우를 대비해서 여기에 올린다.
console.clear()
const takeUntil = Rx.operators.takeUntil;
const onDestroy$ = new Rx.Subject();
const onExecute$ = new Rx.Subject();
const source$ = Rx.Observable.timer(0,1000)
const executeAt$ = Rx.Observable.timer(3000)
executeAt$
.subscribe(x => {
console.log('execute');
onExecute$.next();
})
source$
.pipe(
takeUntil(onDestroy$),
takeUntil(onExecute$)
)
.subscribe(console.log)
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>
을 주제로unsubscribe()
대takeUntil()
Ben Lesh는 '구독을 취소하지 말라'에서 말한다.
너무 많은 구독 개체를 주변에 보관하는 것은 구독을 반드시 관리하고 Rx의 힘을 이용하지 않는 표시입니다.
그리고
TakePill을 사용하여 구독 관리 구성
각주 - 서비스 인스턴스
Rx 코드가 정상으로 보인다면, 또 다른 가능한 원인은 각도 서비스의 여러 인스턴스 때문이다.
만약private onExecute$ = new Subject();
서비스로 포장되어 있으며, 두 개의 어레이(모듈 + 구성 요소 또는 두 개의 구성 요소)를 제공하는 서비스가 있고, 그 다음에 호출하는 인스턴스가 있음.next()
on은 에 사용된 인스턴스와 다를 수 있다.takeUntil()
.
그것은 장황한 일이고, 위의 당신의 코드는 그것이 사실이 아니라는 것을 나타내지만, 꽤 흔한 일처럼 보인다.
그것은 오래되었지만 나는 같은 세나리오를 가지고 있었다.
takePill을 사용하려면 ReplaySubject가 올바른 제목이다.
- 왜냐하면, 제목이 통화하기 전까지 어떤 것을 방출하는 경우, 제목에 가입할 때까지(실행 시) 다시 수신되지 않으며, 테이크 벨은 출처를 등록 취소하지 않을 것이기 때문이다.
- 반대로 ReplaySubject는 구독 시 다시 가입하므로 takeEntery는 내부 구독 취소 통화와 함께 취소된다.
내 경우에는 문제가 있었다.this.destroy$.complete();
나는 많은 구성 요소에서 호출된 서비스에서 구독을 사용하고 있었다.그리고 컴포넌트 OnDestroy 훅에서 서비스 중인 구독을 서비스 방법으로 중지시키려 했다.
destroySubscriptions() {
this.destroy$.next();
this.destroy$.complete();
}
그러나 첫 번째 구성 요소가 가입을 중지하고 완료한 후destroy$
제목, 다음 구성 요소는 다음 이유로 서비스 중인 구독을 중지할 수 없음destroy$
주제가 이미 완료되었고this.destroy$.next();
아아도 취도 취도 취지도 취다. 더 않을 그러니 이 주제를 완성하여 주의하십시오. 더 이상 작동하지 않을 겁니다. 것 )그랬어 ㅎㅎㅎ
참조URL: https://stackoverflow.com/questions/47523082/cancelling-a-observable-with-takeuntil-not-working
'IT이야기' 카테고리의 다른 글
가져오기 요청에서 POST 매개 변수를 전달하는 방법 - 기본 반응 (0) | 2022.03.27 |
---|---|
Nuxt.js vuex 스토어가 유지되지 않음 (0) | 2022.03.27 |
각각은 JavaScript 배열의 함수 오류가 아님 (0) | 2022.03.27 |
페이지를 로드하는 동안 VueJS 구문을 숨기려면 어떻게 해야 하는가? (0) | 2022.03.27 |
POST 요청을 보내는 방법? (0) | 2022.03.27 |