为什么在Angular2的反跳期之后没有调用我的搜索方法

Question

I'm plaguarizing the angular2 heroes tutorial code to learn more. I have this search component in it's own search directory. There is a PersonSearchService which will be called in the same directory. My search method is getting called each time a key is pressed in my input field. However the code in the ngOnInit() does not get invoked each time searchTerms changes. I have set a breakpoint in my PersonSearchService and in the switchmap and neither are getting hit. Do you have any ideas on why that might happen.

import { Component, OnInit } from '@angular/core';  
import { Router }            from '@angular/router';

import {Observable}          from 'rxjs/Observable';
import { Subject }           from 'rxjs';
import {PersonSearchService} from './person-search.service';
import {Person} from '../person';

@Component({
  selector: 'person-search',
  templateUrl: './person-search.component.html',
  styleUrls: ['./person-search.component.css'],
  providers: [PersonSearchService]
})

export class PersonSearchComponent implements OnInit {
  persons: Observable<Person[]>;
  private searchTerms = new Subject<string>();

  constructor(
    private personSearchService: PersonSearchService) {}

  // Push a search term into the observable stream.
  search(term: string): void {
    this.searchTerms.next(term);
  }

  ngOnInit() {
    this.persons = this.searchTerms
      .debounceTime(300)        // wait for 300ms pause in events
      .distinctUntilChanged()   // ignore if next search term is same as prev
      .switchMap(term => term   // switch to new observable each time
        // return the http search observable
        ? this.personSearchService.search(term)
        // or the observable of empty heroes if no search term
        : Observable.of<Person[]>([]))
      .catch(error => {
        // TODO: real error handling
        console.log(error);
        return Observable.of<Person[]>([]);
      });
      }
    }

Answer 1

It's a very common misunderstanding of how Observables work.

What you have assigned to the this.persons is a declaration of what you want to do. This is observable and not the result you want to get. This thing will not do anything by itself. To kick it out you need to subscribe to this declaration, and only then you will get the results you want into your subscription. So corrected version of you component would be something like this:

import { Component, OnInit, OnDestroy } from '@angular/core';  
import { Router }            from '@angular/router';

import {Observable}          from 'rxjs/Observable';
import { Subject }           from 'rxjs';
import {PersonSearchService} from './person-search.service';
import {Person} from '../person';

@Component({
  selector: 'person-search',
  templateUrl: './person-search.component.html',
  styleUrls: ['./person-search.component.css'],
  providers: [PersonSearchService]
})

export class PersonSearchComponent implements OnInit, OnDestroy {
  persons: Person[]; // see here? it's not an observable
  private searchTerms = new Subject<string>();
  private subscription: Subscription; // todo: add to imports from Rx

  constructor(
    private personSearchService: PersonSearchService) {}

  // Push a search term into the observable stream.
  search(term: string): void {
    this.searchTerms.next(term);
  }

  ngOnInit() {
    this.subscription = 
        this.searchTerms
          .debounceTime(300)        // wait for 300ms pause in events
          .distinctUntilChanged()   // ignore if next search term is same as prev
          .switchMap(term => term   // switch to new observable each time
            // return the http search observable
            ? this.personSearchService.search(term)
            // or the observable of empty heroes if no search term
            : Observable.of<Person[]>([]))
          .catch(error => {
            // TODO: real error handling
            console.log(error);
            return Observable.of<Person[]>([]);
          })
          .subscribe((result: Person[]) => {
            this.persons = result;
          });
    }

    ngOnDestroy() {
        // and don't forget cleanup
        this.subscription.unsubscribe();
    }

}

Answer 2

The search method will be invoked each time you press a key, because you attached to on keyup event in the search.component.html

<input #searchBox id="search-box" (keyup)="search(searchBox.value)" />

but the code on the ngOnInit method, more specifically, the switchMap method is invoked after 300 miliseconds if, only if, the value of the input changed.