【Question】rxjs/operator takeWhile vs takeUntil

Question why

To be investigated , Welcome to the discussion ~

Problem description

To avoid memory leaks ,long lived observable Need to be unsubscribe, In general use takeWhile and takeUntil. But in the process of using, I found that sometimes takeWhile Not working properly , do not know why ？？

The body code is as follows ,takeUntil(notifier) It works , But instead takeWhile(() => this.alive) Cannot print out successfully form statusChange complete.

import {
     Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
import {
     FormGroup } from '@angular/forms';
import {
     Subject } from 'rxjs';
import {
     debounceTime, takeUntil, takeWhile } from 'rxjs/operators';

@Component({
    
  selector: 'dialog',
  templateUrl: './dialog.component.html',
})
export class DialogComponent implements OnInit, OnChanges, OnDestroy {
    

  @Input() innerForm?: FormGroup;

  destory$ = new Subject();

  constructor() {
     }

  ngOnInit(): void {
    }

  ngOnChanges(): void {
    
    if (this.innerForm) {
    

      this.innerForm.statusChanges.pipe(takeUntil(this.destory$)).subscribe((status) => {
    
        console.log('form statusChange next', status);
      }, (err) => {
    
        console.log('form statusChange error', err);
      }, () => {
    
        console.log('form statusChange complete');
      });
    }
  }

  ngOnDestroy(): void {
    
    //  If there is no such sentence, just complete  Words , It doesn't print form statusChange complete
    this.destory$.next();
    //  There is nothing in this sentence , As long as there is the above sentence ,takeUntil  Will let source observable complete.  There are also articles that say complete  Must call , Otherwise, there is a risk of memory leakage , do not know why ？？ After the experiment, it will print form statusChange complete
    this.destory$.complete(); 
  }
}

takeWhile and takeUntil Introduce

takeWhile

The more surprising thing is , I always thought takeWhile(condition), as long as condition by true From the source observable emit Out value , But after experiments, it was found that , When condition fail after ,source observable I was block Live in the , Even in the back source observable Can meet the conditions , Not even emit A new value . The following figure illustrates takeWhile.

takeUntil

takeUntil(notifier) Used in source observable By another notifier observable Control of emit It's worth it , When notifier observable When the first value is issued ,source observable stop it emit The new value . Here's the picture notifier observable by timer(5000),5s after source observable Stopped. emit The new value .

The above picture is from the appendix reference article 【RxJS — take vs takeLast vs takeWhile vs takeUntil operators】, Thanks to the author Vinodhec

Reference resources

• RxJS — take vs takeLast vs takeWhile vs takeUntil operators
• Take, TakeUntil, TakeWhile & TakeLast in Angular Observable
• RxJS - When and how to unsubscribe
• RxJS Subscriber unsubscribe vs. complete