refactor(pipes): use angular lifecycle hooks instead of PipeOnDestroy

BREAKING CHANGE:
Previously, pipes that wanted to be notified when they were destroyed
would implement the PipeOnDestroy interface and name the callback
`onDestroy`. This change removes the PipeOnDestroy interface and
instead uses Angular's lifecycle interface `OnDestroy`, with the
`ngOnDestroy` method.

Before:
```
import {Pipe, PipeOnDestroy} from 'angular2/angular2';
@Pipe({pure: false})
export class MyPipe implements PipeOnDestroy {
  onDestroy() {}
}
```

After:
import {Pipe, OnDestroy} from 'angular2/angular2';
@Pipe({pure: false})
export class MyPipe implements PipeOnDestroy {
  ngOnDestroy() {}
}
This commit is contained in:
Jeff Cross
2015-11-17 10:09:23 -08:00
committed by vsavkin
parent 604c8bbad5
commit fcc7ce225e
13 changed files with 79 additions and 82 deletions

View File

@ -39,7 +39,7 @@ export {DynamicChangeDetector} from './dynamic_change_detector';
export {ChangeDetectorRef} from './change_detector_ref';
export {IterableDiffers, IterableDiffer, IterableDifferFactory} from './differs/iterable_differs';
export {KeyValueDiffers, KeyValueDiffer, KeyValueDifferFactory} from './differs/keyvalue_differs';
export {PipeTransform, PipeOnDestroy} from './pipe_transform';
export {PipeTransform} from './pipe_transform';
export {WrappedValue, SimpleChange} from './change_detection_util';
/**

View File

@ -195,7 +195,7 @@ export class ChangeDetectionUtil {
static callPipeOnDestroy(selectedPipe: SelectedPipe): void {
if (implementsOnDestroy(selectedPipe.pipe)) {
(<any>selectedPipe.pipe).onDestroy();
(<any>selectedPipe.pipe).ngOnDestroy();
}
}

View File

@ -1,5 +1,5 @@
library angular2.core.compiler.pipe_lifecycle_reflector;
import 'package:angular2/src/core/change_detection/pipe_transform.dart';
import 'package:angular2/src/core/linker/interfaces.dart';
bool implementsOnDestroy(Object pipe) => pipe is PipeOnDestroy;
bool implementsOnDestroy(Object pipe) => pipe is OnDestroy;

View File

@ -1,3 +1,3 @@
export function implementsOnDestroy(pipe: any): boolean {
return pipe.constructor.prototype.onDestroy;
return pipe.constructor.prototype.ngOnDestroy;
}

View File

@ -31,55 +31,3 @@
*
*/
export interface PipeTransform { transform(value: any, args: any[]): any; }
/**
* To create a stateful Pipe, you should implement this interface and set the `pure`
* parameter to `false` in the {@link PipeMetadata}.
*
* A stateful pipe may produce different output, given the same input. It is
* likely that a stateful pipe may contain state that should be cleaned up when
* a binding is destroyed. For example, a subscription to a stream of data may need to
* be disposed, or an interval may need to be cleared.
*
* ### Example ([live demo](http://plnkr.co/edit/i8pm5brO4sPaLxBx56MR?p=preview))
*
* In this example, a pipe is created to countdown its input value, updating it every
* 50ms. Because it maintains an internal interval, it automatically clears
* the interval when the binding is destroyed or the countdown completes.
*
* ```
* import {Pipe, PipeTransform} from 'angular2/angular2'
* @Pipe({name: 'countdown', pure: false})
* class CountDown implements PipeTransform, PipeOnDestroy {
* remainingTime:Number;
* interval:SetInterval;
* onDestroy() {
* if (this.interval) {
* clearInterval(this.interval);
* }
* }
* transform(value: any, args: any[] = []) {
* if (!parseInt(value, 10)) return null;
* if (typeof this.remainingTime !== 'number') {
* this.remainingTime = parseInt(value, 10);
* }
* if (!this.interval) {
* this.interval = setInterval(() => {
* this.remainingTime-=50;
* if (this.remainingTime <= 0) {
* this.remainingTime = 0;
* clearInterval(this.interval);
* delete this.interval;
* }
* }, 50);
* }
* return this.remainingTime;
* }
* }
* ```
*
* Invoking `{{ 10000 | countdown }}` would cause the value to be decremented by 50,
* every 50ms, until it reaches 0.
*
*/
export interface PipeOnDestroy { onDestroy(): void; }