Rxjs：将 subject.pipe() 分配给 Angular ngOnInit 中的可观察对象

Question

The template has an input listening to keyUp event. The component has an Observable and a Subject. The Subject is piped with operators that will map the string value from the input into a Stock[] Observable. On every keyUp event the Subject emits the next event with a new value from the input.

template:

<div>
<input  name="searchBox"
        [(ngModel)]="searchString"
        placeholder="Search here"
        (keyup)="search()">
</div>

<h2>
     We have found {{ (stocks$ | async )?.length }} stocks!
</h2>
 <app-stock-item *ngFor="let stock of stocks$ | async"
            [stock]="stock"
>

</app-stock-item>       

component:

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
import {StockService} from '../../services/stock.service';
import {Stock} from '../../model/stock';

import {Subject} from 'rxjs';

import {debounceTime,switchMap,distinctUntilChanged,
    startWith, share} from 'rxjs/operators';

@Component({
   selector: 'app-stock-list',
   templateUrl: './stock-list.component.html',
   styleUrls: ['./stock-list.component.css']
})
export class StockListComponent implements OnInit {

  public stocks$!: Observable<Stock[]>;

  public searchString:string = "";

  private searchTerms:Subject<string> = new Subject();

  constructor(private stockService:StockService) { }

  ngOnInit(): void {

  console.log(this.stocks$);

                  // how does this work after ngOnInit is executed?
  this.stocks$ = this.searchTerms.pipe(
                  startWith(this.searchString),
                  debounceTime(500),
                  distinctUntilChanged(),
                  //getStocks returns an Observable of HttpClient
                  switchMap( (query) => this.stockService.getStocks(query)),
                  share()
      );


  }


  search(){

    this.searchTerms.next(this.searchString);

  }

}

If ngOnInit is called only once every rendering of the component, why Subject.pipe() and Subject.next() still works after the ngOnInit finishes its execution? does the Subject gets subscribed anywhere in the code?

Answer 1

Very simplified picture is:

searchTerms = {
  subscriptionFn: null,
  next: function(query) {
    this.subscriptionFn(query);
  }
};
stocks$ = {value: null};
    
    
ngOnInit() {
  this.searchTerms.subscriptionFn = (query) => this.stockService.getStocks(query).subscribe(value => this.stocks$.value = value);
}

search(){

  this.searchTerms.next(this.searchString);

}

And html async pipe will be just {{stocks$.value}} . There are lots of differences - eg switchMap will cancel old request, when new raises etc., but ~~~ this code is doing same.