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

来源：互联网发布：二手市场软件有哪些编辑：程序博客网时间：2024/04/29 15:05

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

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

前言

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

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

01// app.component.ts
02 
03import { 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})
10export class AppComponent {
11  name = 'john doe';
12}

将小写变成大写：

输出结果会是 My name is JOHN DOE.

我们发现，应用程序中重复著上述相同的转换非常多。解决方式可以用 TS 把数据做好转换，再来呈现。也可以将这些转换直接在 HTML 模板里转换。后者过程叫做管道(pipe)。

客制化信道

现在我们要做一个把每个单字第一个字母变成大写的信道：先定义我们的 Pipe

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

接著使用我们的 Pipe

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

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

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

0 0