[Day07]Angular 2教程:07 Angular 2 PIPES(通道)

说明:本系列是30天精通Angular2系列，此教程会第一时间发布在最三方平台，希望给你带来帮助！

本文出自最三方Angular系列教程，转载请注明出处！

前言

每一个应用程序都是一些非常简单的任务开始：获取数据、转换数据，并把它们显示给用户。

我们有想要呈现的数据，但可能样子很丑，造成用户体验很差，或著不是我们要的格式。比方说几乎显示日期 (2016-12-22) 而非原始字符串格式 (Thu Dec 22 2016 20:00:00 GMT+0800)。或著有时候想要把所有小写字母，在显示的时候变成都是大写。

01 // app.component.ts 02   03 import { Component } from '@angular/core'; 04   05 @Component({ 06   selector: 'my-app', 07   // uppercase 为 Angular 内建 08   template: '<p>My name is <strong>{{ name | uppercase }}</strong>.</p>', 09 }) 10 export class AppComponent { 11   name = 'john doe'; 12 }

将小写变成大写：

 输出结果会是 My name is JOHN DOE.
 
 我们发现，应用程序中重复著上述相同的转换非常多。解决方式可以用 TS 把数据做好转换，再来呈现。也可以将这些转换直接在 HTML 模板里转换。后者过程叫做管道(pipe)。
 
 客制化信道
 
 现在我们要做一个把每个单字第一个字母变成大写的信道： 先定义我们的 Pipe
 

01 // capitalize.pipe.ts 02   03 import { Pipe, PipeTransform } from '@angular/core'; 04   05 @Pipe({name: 'capitalize'}) 06 export class CapitalizePipe implements PipeTransform { 07   transform(value: string, args: string[]): any { 08     if (!value) return value; 09   10     return value.replace(/\w\S*/g, function(txt) { 11         return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); 12     }); 13   } 14 }

接著使用我们的 Pipe

 

01 // app.component.ts 02   03 import { Component } from '@angular/core'; 04   05 @Component({ 06   selector: 'my-app', 07   template: '<p>My name is <strong>{{ name | capitalize }}</strong>.</p>' 08   // 用 capitalize 这个 pipe 来做转换 09 }) 10 export class AppComponent { 11   name = 'john doe'; 12 }

 输出结果会是 My name is John Doe.
 
 App 通用的 Pipe
 
 有些 Pipe 我们可能会一直用到，例如日期转换、语言翻译，这些可能在很多个 Components 中都有用到，我们能做到让自己定义的 Pipe 就像一些内建的 Pipe 在每个 Component 中都可以使用。
 一种方法是我们在 App Module 中引入我们写好的 Pipe
 

01 // app.module.ts 02   03 import { NgModule }      from '@angular/core'; 04 import { BrowserModule } from '@angular/platform-browser'; 05   06 import { AppComponent }   from './app.component'; 07 import { CapitalizePipe } from './capitalize.pipe'; // 导入我们的 pipe 08   09 @NgModule({ 10   imports:      [ BrowserModule ], 11   // 引入 capitalize pipe 12   declarations: [ AppComponent, CapitalizePipe ], 13   bootstrap:    [ AppComponent ] 14 }) 15   16 export class AppModule { }

 这样之后要用 Pipe 就不用每个 Component 都一一宣告啰！

本文由 最三方开源平台( http://www.zuisanfang.com/archives/view-2090-1.html)原创，转载请保留版权和链接!