TypeScript Observable.combineLatest方法代码示例

export function initObservable() {

    const click$ = Observable.fromEvent(document,'click');

    const mouse$ = Observable.fromEvent(document,'mousemove')
        .filter((move:MouseEvent) => move.clientY >=200);


    const combined$ = Observable.combineLatest(mouse$, click$);

    combined$.subscribe(
        combined => console.log(combined[0])
    );
}

 constructor(
     private store: Store<any>
 ){
     this.viewModel$ = Observable.combineLatest(
         store.select('todos'),
         store.select('visibilityFilter'),
         ({past = [], present = [], future = []}, visibilityFilter : string) => {
             return {
                 todos: this.visibleTodos(present, visibilityFilter),
                 totalTodos: present.length,
                 completedTodos: present.filter((todo : Todo) => todo.completed).length
             }
         }
     );
 }

 constructor(
     private store: Store<any>
 ){
     this.viewModel$ = Observable.combineLatest(
         store.select('todos'),
         store.select('visibilityFilter'),
         (todos : Array<Todo>, visibilityFilter : string) => {
             return {
                 todos: this.visibleTodos(todos, visibilityFilter),
                 totalTodos: todos.length,
                 completedTodos: todos.filter((todo : Todo) => todo.completed).length
             }
         }
     );
 }

export function typeahead(element: ElementRef, minLength = 1, debounceTime = 250): Observable<string> {
    return Observable.combineLatest(
        Observable.merge(
            Observable.fromEvent(element.nativeElement, 'compositionstart').map(() => true),
            Observable.fromEvent(element.nativeElement, 'compositionend').map(() => false),
        ).startWith(false),
        Observable.fromEvent(element.nativeElement, 'keyup'),
    )
    .filter(array => !array[0])
    .map(array => array[1])
    .map((event: KeyboardEvent) => (event.target as HTMLInputElement).value)
    .debounceTime(debounceTime)
    .distinctUntilChanged()
    .filter(value => value.length >= minLength);
}

 constructor(
   private store: Store<any>
   ) {
   this.viewModel$ = Observable.combineLatest(
     store.select('games'),
     store.select('visibilityFilter'),
     (games: Array<IGame>, visibilityFilter: string) => {
       return {
         games: this.visibleGames(games, visibilityFilter),
         totalGames: games.length,
         completedGames: games.filter((game: Game) => game.completed).length
       }
     }
     );
 }

  ngOnInit() {

    Observable.combineLatest([
      this.route.paramMap,
      this.route.queryParamMap
    ])
    .switchMap(combined => {
      let id = combined[0].get('id');
      let page = combined[1].get('page');

      return this.service.getAll();
    })
    .subscribe(followers => this.followers = followers);
  
      
    }

/**
 * compute ratio
 */
export default function(options: ResponsiveOptions) {

  const scaleSubject = new BehaviorSubject<any>(true);
  const scaleFn = compose(centeringOf(options.target), scalingOf(options.target));

  const hRatio = scaleSubject.map(horizontalRatioOf(options.width));
  const vRatio = scaleSubject.map(verticalRatioOf(options.height));

  const currentRatio = Observable.combineLatest(hRatio, vRatio).map((hv) => Math.min(hv[0], hv[1]));
  currentRatio.subscribe(scaleFn);

  return {
    scale        : scaleSubject,
    currentRatio : currentRatio
  };
}

      .subscribe(data => {

        // map source format to time series data
        let mapped = data.map(single => {
          let typed:TimeSeriesData = {
            value : single[1],
            date : new Date(single[0])
          }
          return typed;
        });

        // store data
        this.data = mapped;


        // DEBUG - we could map the data to percentual changes to the last quarter and offer this as another option...
        // let change = this.data.map(d => d.value).map((value, index, array) => index == 0 ? 0 : value / array[index-1] - 1);
        // console.warn(change);


        // store all years for which we have data
        this.years = this.data
          .map(tsd => tsd.date.getUTCFullYear())
          .filter((elem, pos, arr) => arr.indexOf(elem) == pos);

        // ensure that from <= to in all cases
        this.yearFrom.valueChanges.subscribe(newFrom => {
          if (this.yearTo.value < newFrom)
            this.yearTo.updateValue(newFrom);
        });
        this.yearTo.valueChanges.subscribe(newTo => {
          if (this.yearFrom.value > newTo)
            this.yearFrom.updateValue(newTo);
        });
        
        // whenever one of the years (from,to) change, update the filtered data
        Observable.combineLatest(this.yearFrom.valueChanges, this.yearTo.valueChanges)
          .debounceTime(50)
          .subscribe(yearRange => {
            let from:number = yearRange[0];
            let to:number = yearRange[1];
            this.filteredData = this.data.filter(dataPoint => dataPoint.date.getUTCFullYear() >= from && dataPoint.date.getUTCFullYear() <= to);
          });

        // set initial values to first and last available year
        this.showAllData();
      });

    getCantonOptions(): Observable<IMultiSelectOption[]> {
        const mapToOption = (key: string) => ({
            id: key,
            name: `global.reference.canton.${key}`
        });

        const translateOption = (option: IMultiSelectOption) => {
            return this.translateService.stream(option.name)
                .map((translation) => Object.assign({}, option, { name: translation }));
        };
        const translatedOptions = Object.keys(Canton)
            .filter((key) => !isNaN(Number(Canton[key])))
            .map(mapToOption)
            .map(translateOption);

        return Observable.combineLatest(translatedOptions);
    }

    it('should work', () => {
      const subjectA = new Subject<string>();
      const subjectB = new Subject<string>();
      const log: string[] = [];
      const subject = Observable.combineLatest(subjectA, subjectB).subscribe(([a, b]) => {
        log.push(`${a}-${b}`);
      });

      subjectA.next('hello');
      expect(log).toEqual([]);

      subjectB.next('world');
      expect(log).toEqual(['hello-world']);

      subjectA.next('bye');
      expect(log).toEqual(['hello-world', 'bye-world']);
    });