iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 7
0

前言

每一個應用程式都是一些非常簡單的任務開始:獲取數據、轉換數據,並把它們顯示給用戶。

我們有想要呈現的數據,但可能樣子很醜,造成用戶體驗很差,或著不是我們要的格式。比方說幾乎顯示日期 (2016-12-22) 而非原始字符串格式 (Thu Dec 22 2016 20:00:00 GMT+0800)。或著有時候想要把所有小寫字母,在顯示的時候變成都是大寫。

將小寫變成大寫:

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  // uppercase 為 Angular 內建
  template: '<p>My name is <strong>{{ name | uppercase }}</strong>.</p>',
})
export class AppComponent {
  name = 'john doe';
}

輸出結果會是 My name is JOHN DOE.

我們發現,應用程序中重複著上述相同的轉換非常多。解決方式可以用 TS 把數據做好轉換,再來呈現。也可以將這些轉換直接在 HTML 模板裡轉換。後者過程叫做管道(pipe)。

客製化通道

現在我們要做一個把每個單字第一個字母變成大寫的通道:
先定義我們的 Pipe

// capitalize.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'capitalize'})
export class CapitalizePipe implements PipeTransform {
  transform(value: string, args: string[]): any {
    if (!value) return value;

    return value.replace(/\w\S*/g, function(txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
  }
}

接著使用我們的 Pipe

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<p>My name is <strong>{{ name | capitalize }}</strong>.</p>'
  // 用 capitalize 這個 pipe 來做轉換
})
export class AppComponent {
  name = 'john doe';
}

輸出結果會是 My name is John Doe.

App 通用的 Pipe

有些 Pipe 我們可能會一直用到,例如日期轉換、語言翻譯,這些可能在很多個 Components 中都有用到,我們能做到讓自己定義的 Pipe 就像一些內建的 Pipe 在每個 Component 中都可以使用。

一種方法是我們在 App Module 中引入我們寫好的 Pipe

// app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }   from './app.component';
import { CapitalizePipe } from './capitalize.pipe'; // 導入我們的 pipe

@NgModule({
  imports:      [ BrowserModule ],
  // 引入 capitalize pipe 
  declarations: [ AppComponent, CapitalizePipe ], 
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

這樣之後要用 Pipe 就不用每個 Component 都一一宣告囉!
Plurk 範例


上一篇
[Day 06] Angular 2 表單
下一篇
[Day 08] Angular 2 Lazy Loading 別讓載入速度拖垮你!
系列文
Angular 2 之 30 天邁向神乎其技之路31

尚未有邦友留言

立即登入留言