javascript - How to unsubscribe immediately after the the condition is met in RxJs - Stack Overflow

admin管理员组

文章数量:1202595

I am new to the RxJs observables and I am finding difficulty in unsubscribing the loop once the criteria are met, can you please help me

In the below function if anytime the code reaches the if block I wanted to unsubscribe the Observables

Before asking this questions I have gone through below questions and none of them helped me much

1. Rxjs observable wait until some condition is met
2. AngularJs - RXJS Observable unsubscribe

Javascript Function

this.router.events.subscribe((url: any) => {
    url = this.router.url;
    if ((url === "/profile" || url === "/summary") && this.filterConfigFlag === false) {

        /*
        Perform operations
        */

    } else {
        console.log(typeof (url), url);

    }
});

I am new to the RxJs observables and I am finding difficulty in unsubscribing the loop once the criteria are met, can you please help me

In the below function if anytime the code reaches the if block I wanted to unsubscribe the Observables

Before asking this questions I have gone through below questions and none of them helped me much

1. Rxjs observable wait until some condition is met
2. AngularJs - RXJS Observable unsubscribe

Javascript Function

this.router.events.subscribe((url: any) => {
    url = this.router.url;
    if ((url === "/profile" || url === "/summary") && this.filterConfigFlag === false) {

        /*
        Perform operations
        */

    } else {
        console.log(typeof (url), url);

    }
});

• javascript
• angular
• rxjs
• observable

Share Improve this question Follow edited Jul 5, 2018 at 17:14 Mahesh G asked Jul 5, 2018 at 17:12 Mahesh GMahesh G 1,27666 gold badges3333 silver badges6363 bronze badges 4

• So you want to run the next handler and complete the Observable right after that? – martin Commented Jul 5, 2018 at 17:13
• @martin that's true if that matches I want to go ahead – Mahesh G Commented Jul 5, 2018 at 17:14
• What do you mean by "go ahead". Continue receiving more items or complete? – martin Commented Jul 5, 2018 at 17:15
• @martin I want to complete it. – Mahesh G Commented Jul 5, 2018 at 17:16

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 21

You probably want takeWhile:

this.router.events
  .pipe(
    takeWhile(url => url === ...), // when the condition isn't met it'll complete immediately
  )
  .subscribe(...);

but if you want to include also the last value (the value that completed the Observable) you'll need to do something like this:

Before RxJS 6.4

this.router.events
  .pipe(
    concatMap(url => url === ... ? of(url, null) : of(url)),
    takeWhile(Boolean),
  )
  .subscribe(...);

Since RxJS 6.4

RxJS 6.4 added an overload to takeWhile, it is now possible to include the last value like this:

this.router.events
  .pipe(
    takeWhile(url => url === ..., true),
  )
  .subscribe(...);

You may make use of a Subject and takeUntil operator as follows:

unsubscribe = new Subject<any>();

this.router.events.pipe(takeUntil(unsubscribe)).subscribe((url: any) => {
    url = this.router.url;
    if ((url === "/profile" || url === "/summary") && this.filterConfigFlag === false) {

        /*
        Perform operations
        */
this.unsubscribe.next();
    } else {
        console.log(typeof (url), url);
this.unsubscribe.next();
    }
});

本文标签： javascriptHow to unsubscribe immediately after the the condition is met in RxJsStack Overflow