iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(pipes): add PipeTransform interface & comment

Browse Source 
closes #616
This commit is contained in:
Ward Bell 2015-12-28 11:52:41 -08:00
parent f4c69b6ad0
commit 8d89118031
3 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/docs/_examples/pipes/ts/app/exponential-strength.pipe.ts
View File

@ -1,5 +1,5 @@
// #docregion // #docregion
import {Pipe} from 'angular2/core'; import {Pipe, PipeTransform} from 'angular2/core';
/* /*
* Raise the value exponentially * Raise the value exponentially
* Takes an exponent argument that defaults to 1. * Takes an exponent argument that defaults to 1.
@ -10,7 +10,7 @@ import {Pipe} from 'angular2/core';
* formats to: 1024 * formats to: 1024
*/ */
@Pipe({name: 'exponentialStrength'}) @Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe { export class ExponentialStrengthPipe implements PipeTransform {
transform(value:number, args:string[]) : any { transform(value:number, args:string[]) : any {
return Math.pow(value, parseInt(args[0] || '1', 10)); return Math.pow(value, parseInt(args[0] || '1', 10));

4
public/docs/_examples/pipes/ts/app/fetch-json.pipe.ts
View File

@ -1,6 +1,6 @@
/// <reference path='./window.extension.d.ts'/> /// <reference path='./window.extension.d.ts'/>
// #docregion // #docregion
import {Pipe} from 'angular2/core'; import {Pipe, PipeTransform} from 'angular2/core';
// #docregion pipe-metadata // #docregion pipe-metadata
@Pipe({ @Pipe({
@ -8,7 +8,7 @@ import {Pipe} from 'angular2/core';
pure: false pure: false
}) })
// #enddocregion pipe-metadata // #enddocregion pipe-metadata
export class FetchJsonPipe { export class FetchJsonPipe implements PipeTransform{
private fetchedValue:any; private fetchedValue:any;
private fetchPromise:Promise<any>; private fetchPromise:Promise<any>;

12
public/docs/ts/latest/guide/pipes.jade
View File

@ -123,8 +123,8 @@ figure.image-display
This pipe definition reveals several key points This pipe definition reveals several key points
* A pipe is a class decorated with pipe metadata. * A pipe is a class decorated with pipe metadata.
* The pipe class implements a `transform` method that * The pipe class implements the `PipeTransform` interface's `transform` method that
takes an input value and an optional array of parameter strings and returns the transformed value. takes an input value and an optional array of parameter strings and returns the transformed value.
* There will be one item in the parameter array for each parameter passed to the pipe * There will be one item in the parameter array for each parameter passed to the pipe
@ -136,7 +136,15 @@ figure.image-display
pipe name that we'll use within a template expression. It must be a valid JavaScript identifier. pipe name that we'll use within a template expression. It must be a valid JavaScript identifier.
Our pipe's name is `exponenentialStrength`. Our pipe's name is `exponenentialStrength`.
.l-sub-section
:marked
### The *PipeTransform* Interface
The `transform` method is essential to a pipe.
The `PipeTransform` interface defines that method and guides both tooling and the compiler.
It is optional; Angular looks for and executes the `transform` method regardless.
:marked
Now we need a component to demonstrate our pipe. Now we need a component to demonstrate our pipe.
+makeExample('pipes/ts/app/power-booster.component.ts',null,'app/power-booster.component.ts') +makeExample('pipes/ts/app/power-booster.component.ts',null,'app/power-booster.component.ts')
figure.image-display figure.image-display