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:
@ -226,6 +226,56 @@ export interface DoCheck { ngDoCheck(); }
|
||||
*
|
||||
* bootstrap(App).catch(err => console.error(err));
|
||||
* ```
|
||||
*
|
||||
*
|
||||
* 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 {OnDestroy, Pipe, PipeTransform} from 'angular2/angular2'
|
||||
* @Pipe({name: 'countdown', pure: false})
|
||||
* class CountDown implements PipeTransform, OnDestroy {
|
||||
* remainingTime:Number;
|
||||
* interval:SetInterval;
|
||||
* ngOnDestroy() {
|
||||
* 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 OnDestroy { ngOnDestroy(); }
|
||||
|
||||
|
Reference in New Issue
Block a user