2016-06-23 09:47:54 -07:00
|
|
|
/**
|
|
|
|
* @license
|
|
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
|
|
*
|
|
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
|
|
* found in the LICENSE file at https://angular.io/license
|
|
|
|
*/
|
|
|
|
|
2017-02-17 12:55:55 -08:00
|
|
|
import {ChangeDetectorRef, OnDestroy, Pipe, PipeTransform, WrappedValue, ɵisObservable, ɵisPromise} from '@angular/core';
|
2016-08-02 15:53:34 -07:00
|
|
|
import {EventEmitter, Observable} from '../facade/async';
|
2017-01-27 13:19:00 -08:00
|
|
|
import {invalidPipeArgumentError} from './invalid_pipe_argument_error';
|
2015-08-04 11:55:21 -07:00
|
|
|
|
2016-03-12 14:22:31 +01:00
|
|
|
interface SubscriptionStrategy {
|
2016-05-25 17:16:50 -07:00
|
|
|
createSubscription(async: any, updateLatestValue: any): any;
|
2016-03-12 14:22:31 +01:00
|
|
|
dispose(subscription: any): void;
|
|
|
|
onDestroy(subscription: any): void;
|
|
|
|
}
|
|
|
|
|
|
|
|
class ObservableStrategy implements SubscriptionStrategy {
|
2016-05-25 17:16:50 -07:00
|
|
|
createSubscription(async: any, updateLatestValue: any): any {
|
2016-08-02 15:53:34 -07:00
|
|
|
return async.subscribe({next: updateLatestValue, error: (e: any) => { throw e; }});
|
2015-08-04 11:55:21 -07:00
|
|
|
}
|
|
|
|
|
2016-08-02 15:53:34 -07:00
|
|
|
dispose(subscription: any): void { subscription.unsubscribe(); }
|
2015-08-04 11:55:21 -07:00
|
|
|
|
2016-08-02 15:53:34 -07:00
|
|
|
onDestroy(subscription: any): void { subscription.unsubscribe(); }
|
2015-08-04 11:55:21 -07:00
|
|
|
}
|
|
|
|
|
2016-03-12 14:22:31 +01:00
|
|
|
class PromiseStrategy implements SubscriptionStrategy {
|
2016-05-25 17:16:50 -07:00
|
|
|
createSubscription(async: Promise<any>, updateLatestValue: (v: any) => any): any {
|
|
|
|
return async.then(updateLatestValue, e => { throw e; });
|
2015-08-04 11:55:21 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
dispose(subscription: any): void {}
|
|
|
|
|
|
|
|
onDestroy(subscription: any): void {}
|
|
|
|
}
|
|
|
|
|
2016-09-11 00:27:56 -07:00
|
|
|
const _promiseStrategy = new PromiseStrategy();
|
|
|
|
const _observableStrategy = new ObservableStrategy();
|
2015-08-04 11:55:21 -07:00
|
|
|
|
|
|
|
/**
|
2016-09-08 21:41:09 -07:00
|
|
|
* @ngModule CommonModule
|
|
|
|
* @whatItDoes Unwraps a value from an asynchronous primitive.
|
|
|
|
* @howToUse `observable_or_promise_expression | async`
|
|
|
|
* @description
|
2016-06-01 03:23:29 +02:00
|
|
|
* The `async` pipe subscribes to an `Observable` or `Promise` and returns the latest value it has
|
2016-09-08 21:41:09 -07:00
|
|
|
* emitted. When a new value is emitted, the `async` pipe marks the component to be checked for
|
|
|
|
* changes. When the component gets destroyed, the `async` pipe unsubscribes automatically to avoid
|
2016-06-01 03:23:29 +02:00
|
|
|
* potential memory leaks.
|
2015-08-04 11:55:21 -07:00
|
|
|
*
|
2016-06-01 03:23:29 +02:00
|
|
|
*
|
|
|
|
* ## Examples
|
2015-08-04 11:55:21 -07:00
|
|
|
*
|
2015-11-02 15:46:59 -08:00
|
|
|
* This example binds a `Promise` to the view. Clicking the `Resolve` button resolves the
|
|
|
|
* promise.
|
|
|
|
*
|
2016-09-08 21:41:09 -07:00
|
|
|
* {@example common/pipes/ts/async_pipe.ts region='AsyncPipePromise'}
|
2015-11-02 15:46:59 -08:00
|
|
|
*
|
|
|
|
* It's also possible to use `async` with Observables. The example below binds the `time` Observable
|
2016-11-22 22:31:27 -05:00
|
|
|
* to the view. The Observable continuously updates the view with the current time.
|
2015-11-02 15:46:59 -08:00
|
|
|
*
|
2016-09-08 21:41:09 -07:00
|
|
|
* {@example common/pipes/ts/async_pipe.ts region='AsyncPipeObservable'}
|
2016-05-27 11:24:05 -07:00
|
|
|
*
|
|
|
|
* @stable
|
2015-08-04 11:55:21 -07:00
|
|
|
*/
|
2015-09-08 09:17:58 -07:00
|
|
|
@Pipe({name: 'async', pure: false})
|
2017-01-21 11:27:42 +01:00
|
|
|
export class AsyncPipe implements OnDestroy, PipeTransform {
|
2016-09-11 00:27:56 -07:00
|
|
|
private _latestValue: Object = null;
|
|
|
|
private _latestReturnedValue: Object = null;
|
|
|
|
|
|
|
|
private _subscription: Object = null;
|
|
|
|
private _obj: Observable<any>|Promise<any>|EventEmitter<any> = null;
|
2016-05-27 12:20:45 -07:00
|
|
|
private _strategy: SubscriptionStrategy = null;
|
|
|
|
|
2016-09-11 00:27:56 -07:00
|
|
|
constructor(private _ref: ChangeDetectorRef) {}
|
2015-08-04 11:55:21 -07:00
|
|
|
|
2015-11-17 10:09:23 -08:00
|
|
|
ngOnDestroy(): void {
|
2016-09-11 00:27:56 -07:00
|
|
|
if (this._subscription) {
|
2015-08-04 11:55:21 -07:00
|
|
|
this._dispose();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-01-31 18:11:18 -08:00
|
|
|
transform<T>(obj: Observable<T>): T|null;
|
|
|
|
transform<T>(obj: Promise<T>): T|null;
|
|
|
|
transform<T>(obj: EventEmitter<T>): T|null;
|
2016-06-08 16:38:52 -07:00
|
|
|
transform(obj: Observable<any>|Promise<any>|EventEmitter<any>): any {
|
2016-09-11 00:27:56 -07:00
|
|
|
if (!this._obj) {
|
|
|
|
if (obj) {
|
2016-05-25 17:16:50 -07:00
|
|
|
this._subscribe(obj);
|
2015-08-04 11:55:21 -07:00
|
|
|
}
|
2015-12-17 20:30:40 -08:00
|
|
|
this._latestReturnedValue = this._latestValue;
|
2015-12-04 16:43:49 -08:00
|
|
|
return this._latestValue;
|
2015-08-04 11:55:21 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
if (obj !== this._obj) {
|
|
|
|
this._dispose();
|
2017-01-31 18:11:18 -08:00
|
|
|
return this.transform(obj as any);
|
2015-08-04 11:55:21 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this._latestValue === this._latestReturnedValue) {
|
|
|
|
return this._latestReturnedValue;
|
|
|
|
}
|
2016-09-11 00:27:56 -07:00
|
|
|
|
|
|
|
this._latestReturnedValue = this._latestValue;
|
|
|
|
return WrappedValue.wrap(this._latestValue);
|
2015-08-04 11:55:21 -07:00
|
|
|
}
|
|
|
|
|
2016-09-11 00:27:56 -07:00
|
|
|
private _subscribe(obj: Observable<any>|Promise<any>|EventEmitter<any>): void {
|
2015-08-04 11:55:21 -07:00
|
|
|
this._obj = obj;
|
|
|
|
this._strategy = this._selectStrategy(obj);
|
2016-02-11 17:01:17 -08:00
|
|
|
this._subscription = this._strategy.createSubscription(
|
2016-05-25 17:16:50 -07:00
|
|
|
obj, (value: Object) => this._updateLatestValue(obj, value));
|
2015-08-04 11:55:21 -07:00
|
|
|
}
|
|
|
|
|
2016-09-11 00:27:56 -07:00
|
|
|
private _selectStrategy(obj: Observable<any>|Promise<any>|EventEmitter<any>): any {
|
2017-02-17 12:55:55 -08:00
|
|
|
if (ɵisPromise(obj)) {
|
2015-08-04 11:55:21 -07:00
|
|
|
return _promiseStrategy;
|
2016-09-11 00:27:56 -07:00
|
|
|
}
|
|
|
|
|
2017-02-17 12:55:55 -08:00
|
|
|
if (ɵisObservable(obj)) {
|
2015-08-04 11:55:21 -07:00
|
|
|
return _observableStrategy;
|
|
|
|
}
|
2016-09-11 00:27:56 -07:00
|
|
|
|
2017-01-27 13:19:00 -08:00
|
|
|
throw invalidPipeArgumentError(AsyncPipe, obj);
|
2015-08-04 11:55:21 -07:00
|
|
|
}
|
|
|
|
|
2016-09-11 00:27:56 -07:00
|
|
|
private _dispose(): void {
|
2015-08-04 11:55:21 -07:00
|
|
|
this._strategy.dispose(this._subscription);
|
|
|
|
this._latestValue = null;
|
|
|
|
this._latestReturnedValue = null;
|
|
|
|
this._subscription = null;
|
|
|
|
this._obj = null;
|
|
|
|
}
|
|
|
|
|
2017-01-21 11:27:42 +01:00
|
|
|
private _updateLatestValue(async: any, value: Object): void {
|
2015-08-04 11:55:21 -07:00
|
|
|
if (async === this._obj) {
|
|
|
|
this._latestValue = value;
|
2015-08-28 10:08:18 -07:00
|
|
|
this._ref.markForCheck();
|
2015-08-04 11:55:21 -07:00
|
|
|
}
|
|
|
|
}
|
2015-08-14 10:03:45 -07:00
|
|
|
}
|