TypeScript operators.withLatestFrom函数代码示例

export const ngbFocusTrap = (element: HTMLElement, stopFocusTrap$: Observable<any>, refocusOnClick = false) => {
  // last focused element
  const lastFocusedElement$ =
      fromEvent<FocusEvent>(element, 'focusin').pipe(takeUntil(stopFocusTrap$), map(e => e.target));

  // 'tab' / 'shift+tab' stream
  fromEvent<KeyboardEvent>(element, 'keydown')
      .pipe(
          takeUntil(stopFocusTrap$),
          // tslint:disable:deprecation
          filter(e => e.which === Key.Tab),
          // tslint:enable:deprecation
          withLatestFrom(lastFocusedElement$))
      .subscribe(([tabEvent, focusedElement]) => {
        const[first, last] = getFocusableBoundaryElements(element);

        if ((focusedElement === first || focusedElement === element) && tabEvent.shiftKey) {
          last.focus();
          tabEvent.preventDefault();
        }

        if (focusedElement === last && !tabEvent.shiftKey) {
          first.focus();
          tabEvent.preventDefault();
        }
      });

  // inside click
  if (refocusOnClick) {
    fromEvent(element, 'click')
        .pipe(takeUntil(stopFocusTrap$), withLatestFrom(lastFocusedElement$), map(arr => arr[1] as HTMLElement))
        .subscribe(lastFocusedElement => lastFocusedElement.focus());
  }
};

> => (action$, state$, { selectLogFilterQueryAsJson, selectVisibleLogSummary }) => {
  const filterQuery$ = state$.pipe(map(selectLogFilterQueryAsJson));
  const summaryInterval$ = state$.pipe(
    map(selectVisibleLogSummary),
    map(({ start, end }) => (start && end ? getLoadParameters(start, end) : null)),
    filter(isNotNull)
  );

  const shouldLoadBetweenNewInterval$ = action$.pipe(
    filter(logPositionActions.reportVisibleSummary.match),
    filter(
      ({ payload: { bucketsOnPage, pagesBeforeStart, pagesAfterEnd } }) =>
        bucketsOnPage < MINIMUM_BUCKETS_PER_PAGE ||
        pagesBeforeStart < MINIMUM_BUFFER_PAGES ||
        pagesAfterEnd < MINIMUM_BUFFER_PAGES
    ),
    map(({ payload: { start, end } }) => getLoadParameters(start, end))
  );

  const shouldLoadWithNewFilter$ = action$.pipe(
    filter(logFilterActions.applyLogFilterQuery.match),
    withLatestFrom(filterQuery$, (filterQuery, filterQueryString) => filterQueryString)
  );

  return merge(
    shouldLoadBetweenNewInterval$.pipe(
      withLatestFrom(filterQuery$),
      exhaustMap(([{ start, end, bucketSize }, filterQuery]) => [
        loadSummary({
          start,
          end,
          sourceId: 'default',
          bucketSize,
          filterQuery,
        }),
      ])
    ),
    shouldLoadWithNewFilter$.pipe(
      withLatestFrom(summaryInterval$),
      exhaustMap(([filterQuery, { start, end, bucketSize }]) => [
        loadSummary({
          start,
          end,
          sourceId: 'default',
          bucketSize: (end - start) / LOAD_BUCKETS_PER_PAGE,
          filterQuery,
        }),
      ])
    )
  );
};

  it('should not break unsubscription chains when result is unsubscribed explicitly', () => {
    const e1 =   hot('--a--^---b---c---d-|');
    const e1subs =        '^          !   ';
    const e2 =   hot('--e--^-f---g---h------|');
    const e2subs =        '^          !   ';
    const e3 =   hot('--i--^-j---k---l------|');
    const e3subs =        '^          !   ';
    const expected =      '----x---y---   ';
    const unsub =         '           !   ';
    const values = {
      x: 'bfj',
      y: 'cgk',
      z: 'dhl'
    };
    const project = function (a: string, b: string, c: string) { return a + b + c; };

    const result = e1.pipe(
      mergeMap((x: string) => of(x)),
      withLatestFrom(e2, e3, project),
      mergeMap((x: string) => of(x))
    );

    expectObservable(result, unsub).toBe(expected, values);
    expectSubscriptions(e1.subscriptions).toBe(e1subs);
    expectSubscriptions(e2.subscriptions).toBe(e2subs);
    expectSubscriptions(e3.subscriptions).toBe(e3subs);
  });

  takeUntil2() {
    // emit value every 1s
    const source = interval(1000);
    // is number even?
    const isEven = val => val % 2 === 0;
    // only allow values that are even
    const evenSource = source.pipe(filter(isEven));
    // keep a running total of the number of even numbers out
    const evenNumberCount = evenSource.pipe(scan((acc, _) => acc + 1, 0));
    // do not emit until 5 even numbers have been emitted
    const fiveEvenNumbers = evenNumberCount.pipe(filter(val => val > 5));

    const example = evenSource.pipe(
      // also give me the current even number count for display
      withLatestFrom(evenNumberCount),
      map(([val, count]) => `Even number (${count}) : ${val}`),
      // when five even numbers have been emitted, complete source observable
      takeUntil(fiveEvenNumbers)
    );
    /*
    	Even number (1) : 0,
      Even number (2) : 2
    	Even number (3) : 4
    	Even number (4) : 6
    	Even number (5) : 8
    */
    const subscribe = example.subscribe(val => console.log(val));
  }

> => (
  action$,
  state$,
  { selectMetricTimeUpdatePolicyInterval, selectMetricRangeFromTimeRange }
) => {
  const updateInterval$ = state$.pipe(
    map(selectMetricTimeUpdatePolicyInterval),
    filter(isNotNull)
  );

  const range$ = state$.pipe(
    map(selectMetricRangeFromTimeRange),
    filter(isNotNull)
  );

  return action$.pipe(
    filter(startMetricsAutoReload.match),
    withLatestFrom(updateInterval$, range$),
    exhaustMap(([action, updateInterval, range]) =>
      timer(0, updateInterval).pipe(
        map(() =>
          setRangeTime({
            from: moment()
              .subtract(range, 'ms')
              .valueOf(),
            to: moment().valueOf(),
            interval: '1m',
          })
        ),
        takeUntil(action$.pipe(filter(stopMetricsAutoReload.match)))
      )
    )
  );
};

  asDiagram('withLatestFrom')('should combine events from cold observables', () => {
    const e1 =  cold('-a--b-----c-d-e-|');
    const e2 =  cold('--1--2-3-4---|   ');
    const expected = '----B-----C-D-E-|';

    const result = e1.pipe(withLatestFrom(e2, (a: string, b: string) => String(a) + String(b)));

    expectObservable(result).toBe(expected, { B: 'b1', C: 'c4', D: 'd4', E: 'e4' });
  });

export const createTimelineNoteEpic = <State>(): Epic<Action, Action, State> => action$ =>
  action$.pipe(
    withLatestFrom(),
    filter(([action]) => timelineNoteActionsType.includes(action.type)),
    switchMap(([action]) => {
      dispatcherTimelinePersistQueue.next({ action });
      return empty();
    })
  );

 constructor(initialState: T, action$: Dispatcher, reducer$: Reducer) {
   super(initialState);
   action$
     .pipe(
       observeOn(queue),
       withLatestFrom(reducer$),
       scan<[Action, ActionReducer<any>], T>(
         (state, [action, reducer]) => reducer(state, action),
         initialState,
       ),
     )
     .subscribe(value => this.next(value));
 }

    .run(['ConfigEffects', 'ConfigureState', '$uiRouter', (ConfigEffects, ConfigureState, $uiRouter) => {
        $uiRouter.plugin(UIRouterRx);

        ConfigureState.addReducer(refsReducer({
            models: {at: 'domains', store: 'caches'},
            caches: {at: 'caches', store: 'models'}
        }));

        ConfigureState.addReducer((state, action) => Object.assign({}, state, {
            clusterConfiguration: editReducer(state.clusterConfiguration, action),
            configurationLoading: loadingReducer(state.configurationLoading, action),
            basicCaches: itemsEditReducerFactory(basicCachesActionTypes)(state.basicCaches, action),
            clusters: mapStoreReducerFactory(clustersActionTypes)(state.clusters, action),
            shortClusters: mapCacheReducerFactory(shortClustersActionTypes)(state.shortClusters, action),
            caches: mapStoreReducerFactory(cachesActionTypes)(state.caches, action),
            shortCaches: mapCacheReducerFactory(shortCachesActionTypes)(state.shortCaches, action),
            models: mapStoreReducerFactory(modelsActionTypes)(state.models, action),
            shortModels: mapCacheReducerFactory(shortModelsActionTypes)(state.shortModels, action),
            igfss: mapStoreReducerFactory(igfssActionTypes)(state.igfss, action),
            shortIgfss: mapCacheReducerFactory(shortIGFSsActionTypes)(state.shortIgfss, action),
            edit: editReducer2(state.edit, action)
        }));

        ConfigureState.addReducer(shortObjectsReducer);

        ConfigureState.addReducer((state, action) => {
            switch (action.type) {
                case 'APPLY_ACTIONS_UNDO':
                    return action.state;

                default:
                    return state;
            }
        });

        const la = ConfigureState.actions$.pipe(scan((acc, action) => [...acc, action], []));

        ConfigureState.actions$.pipe(
            filter((a) => a.type === 'UNDO_ACTIONS'),
            withLatestFrom(la, ({actions}, actionsWindow, initialState) => {
                return {
                    type: 'APPLY_ACTIONS_UNDO',
                    state: actionsWindow.filter((a) => !actions.includes(a)).reduce(ConfigureState._combinedReducer, {})
                };
            }),
            tap((a) => ConfigureState.dispatchAction(a))
        )
        .subscribe();
        ConfigEffects.connect();
    }])

 onReadCompleted(data: string) {
   this.app$.pipe(
     withLatestFrom(this.store.select(getQrCodeTemplates)),
   ).pipe(first()).subscribe(([ app, templates ]) => {
     // create the default qr template if there's not any
     if (!templates.some(template => template.is_default)) {
       const payload: DefaultQrCodeTemplatePayload = {
         appId: app.app_id,
         backendId: app.backend_server,
         data: data,
       };
       this.store.dispatch(new CreateDefaultQrCodeTemplateAction(payload));
     }
   });
 }

> => (action$, state$, { selectWaffleTimeUpdatePolicyInterval }) => {
  const updateInterval$ = state$.pipe(
    map(selectWaffleTimeUpdatePolicyInterval),
    filter(isNotNull)
  );

  return action$.pipe(
    filter(startAutoReload.match),
    withLatestFrom(updateInterval$),
    exhaustMap(([action, updateInterval]) =>
      timer(0, updateInterval).pipe(
        map(() => jumpToTime(Date.now())),
        takeUntil(action$.pipe(filter(stopAutoReload.match)))
      )
    )
  );
};

  ngOnInit() {
    const recallSubject$ = new Subject();
    this.time$ = this.store.select("clockReducer");
    this.people$ = this.store.select("peoplezReducer");

    this.person$ = new Subject();
    this.seconds$ = interval(1000);
    this.recall$ = recallSubject$
      .pipe(withLatestFrom(this.time$, (_, y) => y))
      .pipe(map(time => ({type: RECALL, payload: time})));

    this.merged$ = merge(
      this.seconds$.pipe(mapTo({type: SECOND, payload: 1})),
      this.person$.pipe(map(value => ({payload: value, type: ADVANCE}))),
      this.recall$
    );

  }

> => (action$, state$, { apolloClient$ }) =>
  action$.pipe(
    filter(actionCreators.resolve.match),
    withLatestFrom(apolloClient$),
    switchMap(([{ payload: variables }, apolloClient]) =>
      from(
        apolloClient.query<Data>({
          query: graphqlQuery,
          variables,
          fetchPolicy: 'no-cache',
        })
      ).pipe(
        map(result => actionCreators.resolveDone({ params: variables, result })),
        catchError(error => [actionCreators.resolveFailed({ params: variables, error })]),
        startWith(actionCreators.resolveStarted(variables))
      )
    )
  );

export const createMover = <T extends Historical>(
  card$: Observable<T>,
  getId: (card: Historical) => string): Mover => {

  const move$ = new Subject<void>()
  const move = () => { move$.next() }
  const id$ = card$.pipe(map(getId))

  const moveId$ = move$.pipe(
    withLatestFrom(id$),
    map(([, id]) => id))

  return {
    move,
    id$,
    moveId$,
  }
}

 withLatestFrom1() {
   // emit every 5s
   const source = interval(5000);
   // emit every 1s
   const secondSource = interval(1000);
   const example = source.pipe(
     withLatestFrom(secondSource),
     map(([first, second]) => {
       return `First Source (5s): ${first} Second Source (1s): ${second}`;
     })
   );
   /*
     "First Source (5s): 0 Second Source (1s): 4"
     "First Source (5s): 1 Second Source (1s): 9"
     "First Source (5s): 2 Second Source (1s): 14"
     ...
   */
   const subscribe = example.subscribe(val => console.log(val));
 }