TypeScript Observable.subscribe方法代碼示例

 ngOnInit() {
   this.appMode$.subscribe((mode: AppModes) => {
     this.show = mode !== AppModes.Add && mode !== AppModes.Edit;
   });
 }

 private subscribeToSaveResponse(result: Observable<HttpResponse<IBankAccount>>) {
     result.subscribe((res: HttpResponse<IBankAccount>) => this.onSaveSuccess(), (res: HttpErrorResponse) => this.onSaveError());
 }

 expect(() => {
   window.subscribe();
 }).to.throw(ObjectUnsubscribedError);

setTimeout(() => {
  sequence.subscribe({
    next(num) { console.log('2nd subscribe: ' + num); },
    complete() { console.log('2nd sequence finished.'); }
  });
}, 500);

export const findCodeViews = (codeHost: CodeHost, watchChildrenModifications = true) => (
    containers: Observable<Element>
) => {
    const codeViewsFromList: Observable<ResolvedCodeView> = containers.pipe(
        filter(() => !!codeHost.codeViews),
        mergeMap(container =>
            from(codeHost.codeViews!).pipe(
                map(({ selector, ...info }) => ({
                    info,
                    matches: container.querySelectorAll<HTMLElement>(selector),
                }))
            )
        ),
        mergeMap(({ info, matches }) =>
            of(...matches).pipe(
                map(codeView => ({
                    ...info,
                    codeView,
                }))
            )
        )
    )

    const codeViewsFromResolver: Observable<ResolvedCodeView> = containers.pipe(
        filter(() => !!codeHost.codeViewResolver),
        map(container => ({
            resolveCodeView: codeHost.codeViewResolver!.resolveCodeView,
            matches: container.querySelectorAll<HTMLElement>(codeHost.codeViewResolver!.selector),
        })),
        mergeMap(({ resolveCodeView, matches }) =>
            of(...matches).pipe(
                map(codeView => ({
                    resolved: resolveCodeView(codeView),
                    codeView,
                })),
                filter(propertyIsDefined('resolved')),
                map(({ resolved, ...rest }) => ({
                    ...resolved,
                    ...rest,
                }))
            )
        )
    )

    const obs = [codeViewsFromList, codeViewsFromResolver]

    if (watchChildrenModifications) {
        const possibleLazilyLoadedContainers = new Subject<HTMLElement>()

        const mutationObserver = new MutationObserver(mutations => {
            for (const mutation of mutations) {
                if (mutation.type === 'childList' && mutation.target instanceof HTMLElement) {
                    const { target } = mutation

                    possibleLazilyLoadedContainers.next(target)
                }
            }
        })

        containers.subscribe(container =>
            mutationObserver.observe(container, {
                childList: true,
                subtree: true,
            })
        )

        const lazilyLoadedCodeViews = possibleLazilyLoadedContainers.pipe(findCodeViews(codeHost, false))

        obs.push(lazilyLoadedCodeViews)
    }

    return merge(...obs).pipe(
        emitWhenIntersecting(250),
        filter(({ codeView }) => !codeView.classList.contains('sg-mounted'))
    )
}

 ngOnInit(): void {
   this.counter$.subscribe((state: CounterModel): void => {
     this.c$ = { ...state };
   });
 }

 private subscribeToSaveResponse(result: Observable<Customer>) {
     result.subscribe(() => this.onSaveSuccess(), () => this.onSaveError());
 }

 * - the execution can be disposed.
 */

// how to create a new Observable:
//
// the constructor argument is a function that is called when the Observable is
// initially subscribed to.
// 
// This function represents an Observable execution that happens for any
// Observer/Consumer that subscribes. 
// The subscriber is an object that has 3 methods:
//
// - `next` can be called to emit new values that will be consumed.
// - `error` can be called to raise an error.
// - `complete` can be called to notify of a successful completion.

const o$ = new Observable<number>(subscriber => subscriber.next(1));

// creates a Subscription: an "execution environment" for the observer/consumer.
// the observable will start emitting values only after a subscription.
const subscription = o$.subscribe(v => console.log("subscriber: " + v));

console.log(`is the observable active? ${!subscription.closed}`);

// the subscription can be used to cancel the execution, more on this later on.

// Output:
//
// subscriber: 1
// is the observable active? true

 this.productSearchListUpdateService.change.subscribe((result: Observable<Object>) => {
   this.searchTerm = this.productSearchListUpdateService.searchTerm;
   result.subscribe(res => {
     this.productList = res.results;
   });
 });

 /**
  * Make Cold observable to Hot observable
  * 
  * On caller function will not need to make ".subscribe(...)" to execute procedure
  * 
  * @param cold Observable
  */
 public static makeHot<T>(cold: Observable<T>) {
   const subject = new Subject<T>();
   cold.subscribe(subject);
   return new Observable<T>((observer: any) => subject.subscribe(observer));
 }