TypeScript BehaviorSubject.subscribe方法代碼示例

 public ngOnInit() {
     this.value.subscribe((value:any)=>{
         this._currentValue = value;
     });
     this.maxValue = (typeof this.maxValue !== "undefined") ? this.maxValue : 100;
     this.minValue = (typeof this.minValue !== "undefined") ? this.minValue : 0;
     this.textInput = new FormControl(this._currentValue);
     this.textInput.valueChanges.debounceTime(500).subscribe((value)=>{
         if(this._validate(value)) {
             this.textInput.setValue(value);
             this.value.next(value);
         } else {
             this.textInput.setValue(this._currentValue);
             this.value.next(this._currentValue);
         }
     })
 }

    it('should map router updates into an "UPDATE_LOCATION" action when undefined', function(done) {
      const store: any = new BehaviorSubject({ });

      const router: any = {
        url: '/home',
        events
      };

      connectRouterActions(router, store);

      router.events.next(new NavigationEnd(1, '/', '/'));

      store.subscribe(action => {
        expect(action.type).toBe(routerActions.routerActions.UPDATE_LOCATION);
        expect(action.payload.path).toBe(router.url);
        done();
      });
    });

export default function<S extends StateT>({
  stateType,
  initialState
}: {
  stateType: t.Interface<S>;
  initialState: S;
}): { transition: TransitionFunction<S>; states: S[] } {
  const stateSubject = new BehaviorSubject<S>(initialState);
  const states: S[] = [];
  stateSubject.subscribe(s => {
    states.push(s);
  });
  const { transition } = mkTransition({
    stateType,
    stateSubject,
    transitionReducer: identity,
    syncToBrowser: () => {},
    dryRunBrowserTransition: s => s
  });
  return { states, transition };
}

function wrapIntoBehavior(initState, obs) {
  const res = new BehaviorSubject(initState);
  obs.subscribe(s => res.next(s));
  res.subscribe(v => console.info('BS', v), v => console.error('error:', v));
  return res;
}

    constructor(element: HTMLElement, currentFrame$: Observable<IFrame>, renderMode: RenderMode) {
        this._element = element;
        this._currentFrame$ = currentFrame$;

        renderMode = renderMode != null ? renderMode : RenderMode.Letterbox;

        this._resize$ = new Subject<void>();
        this._renderCameraOperation$ = new Subject<IRenderCameraOperation>();

        this._size$ =
            new BehaviorSubject<ISize>(
                {
                    height: this._element.offsetHeight,
                    width: this._element.offsetWidth,
                });

        this._resize$
            .map<ISize>(
                (): ISize => {
                    return { height: this._element.offsetHeight, width: this._element.offsetWidth };
                })
            .subscribe(this._size$);

        this._renderMode$ = new BehaviorSubject<RenderMode>(renderMode);

        this._renderCameraHolder$ = this._renderCameraOperation$
            .startWith(
                (rc: RenderCamera): RenderCamera => {
                    return rc;
                })
            .scan<RenderCamera>(
                (rc: RenderCamera, operation: IRenderCameraOperation): RenderCamera => {
                    return operation(rc);
                },
                new RenderCamera(this._element.offsetWidth / this._element.offsetHeight, renderMode))
            .publishReplay(1)
            .refCount();

        this._renderCameraFrame$ = this._currentFrame$
            .withLatestFrom(
                this._renderCameraHolder$,
                (frame: IFrame, renderCamera: RenderCamera): [IFrame, RenderCamera] => {
                    return [frame, renderCamera];
                })
            .do(
                (args: [IFrame, RenderCamera]): void => {
                    let frame: IFrame = args[0];
                    let rc: RenderCamera = args[1];

                    let camera: Camera = frame.state.camera;

                    if (rc.alpha !== frame.state.alpha ||
                        rc.zoom !== frame.state.zoom ||
                        rc.camera.diff(camera) > 0.00001) {

                        let currentTransform: Transform = frame.state.currentTransform;
                        let previousTransform: Transform =
                            frame.state.previousTransform != null ?
                                frame.state.previousTransform :
                                frame.state.currentTransform;

                        let previousNode: Node =
                            frame.state.previousNode != null ?
                                frame.state.previousNode :
                                frame.state.currentNode;

                        rc.currentAspect = currentTransform.basicAspect;
                        rc.currentPano = frame.state.currentNode.fullPano;
                        rc.previousAspect = previousTransform.basicAspect;
                        rc.previousPano = previousNode.fullPano;

                        rc.alpha = frame.state.alpha;
                        rc.zoom = frame.state.zoom;

                        rc.camera.copy(camera);
                        rc.updatePerspective(camera);

                        rc.updateProjection();
                    }

                    rc.frameId = frame.id;
                })
            .map<RenderCamera>(
                (args: [IFrame, RenderCamera]): RenderCamera => {
                    return args[1];
                })
            .publishReplay(1)
            .refCount();

        this._renderCamera$ = this._renderCameraFrame$
            .filter(
                (rc: RenderCamera): boolean => {
                    return rc.changed;
                })
            .publishReplay(1)
            .refCount();

        this._size$
            .skip(1)
            .map<IRenderCameraOperation>(
//.........這裏部分代碼省略.........

export default <S extends StateT>(stateType: StateTcombType<S>) => ({
  initialState,
  transitionReducer: _transitionReducer = transitionReducerIdentity,
  subscribe = () => {},
  init = () => {},
  shouldSerializeKey = () => true,
  shouldBrowserPatchBePushedOrReplaced = () => true,
  provideContext,
  history,
  paths
}: RunParams<S>): RunReturn => {
  const transitionReducer: TransitionFunctionFunction<S> = (s: S) => omitNils<S>(_transitionReducer(s));

  const state = new BehaviorSubject(stateType(initialState));
  state.subscribe(subscribe);

  const { syncToBrowser: _syncToBrowser, onBrowserChange, dryRunBrowserTransition } = mkBrowser(paths, history);

  const stringify = _stringify(stateType);

  const syncToBrowser = (oldState: S, newState: S, forceReplace: boolean = false) => {
    const newSerialized = pickBy<S, S>(newState, (_: any, k) => shouldSerializeKey(k));
    if (process.env.NODE_ENV === 'development') {
      log('syncing to browser, omitted:', difference(Object.keys(newState), Object.keys(newSerialized)));
    }
    const newStringified = stringify(newSerialized);
    return _syncToBrowser(
      newStringified,
      forceReplace ? false : shouldBrowserPatchBePushedOrReplaced(oldState, newState)
    );
  };

  const { transition, dryRunTransition } = mkTransition({
    stateSubject: state,
    stateType,
    syncToBrowser,
    transitionReducer,
    dryRunBrowserTransition
  });

  const { values: provideContextValues = {}, types: provideContextTypes = {} } = provideContext || {};
  const ProvideWrapper = mkContextWrapper(
    { ...provideContextValues, transition, state },
    { ...provideContextTypes, ...ConnectContextTypes }
  );

  // wait to receive the first browser state before resolving, so that users can
  // render with something meaningful at hand
  // TODO(gio): consider removing asynchronicity here (see TODO below)
  let _bootstrapped = false;

  const mergeStateAndValidBrowserState = mergeStateAndBrowserState<S>(stateType);

  // TODO(gio): is this promise really needed? can't we just read the first browser state synchronously?
  // problem: in this way we are loosing all error thrown by `onBrowserChange` or `init`
  return new Promise((resolve, reject) => {
    try {
      onBrowserChange((fromRouter, action) => {
        log('browser change', `(action=${action})`, fromRouter);
        const mergedState = mergeStateAndValidBrowserState(state.value, fromRouter);
        if (action !== 'PUSH') {
          // if not pushing (so either 'POP' or 'REPLACE') it means that either:
          // - POP: user is using back via browser
          // - REPLACE: we are replacing an old history entry not valid anymore (see code below here)
          const { newState, stateChanged } = (dryRunTransition(mergedState, mergedState) as any) as {
            newState: S; // TODO(typo)
            stateChanged: boolean;
          };
          if (stateChanged) {
            log('syncing (replacing) to browser after a back', 'oldState', mergedState, 'newState', newState);
            state.next(newState);
            syncToBrowser(newState, newState, true);
          } else {
            log('not syncing to browser after this back');
            if (dryRunTransition(state.value, newState).stateChanged) {
              log('...just nexting the new state');
              state.next(newState);
            }
          }
        } else {
          // otherwise (simpler case!), we get a PUSH if:
          // - user is entering a new url via browser
          // - user is interacting with the app (via transition())
          // in both cases, if there's no diff, `transition` will do its thing and
          // avoid pushing to browser
          transition(mergedState);
        }

        if (!_bootstrapped) {
          _bootstrapped = true;
          resolve(ProvideWrapper);
        }
      });

      init(state, transition);
    } catch (e) {
      reject(e);
    }
  });
};