Angular 2 + 折騰記 ：(5) 動手實現一個自定義管道

CRPER發表於2017-03-29
Angular

前言

管道這東西，可以讓使用者的體驗變得好，也可以省去我們一些重複性的工作；
官方的內建管道就不解釋了。。自行看文件吧複製程式碼

管道的常規使用

一般是用於Mustache語法的雙向資料內，eg: {{item | json}}

上面的例子是用了內建的JsonPipe管道。。有人說管道帶引數怎麼搞？，eg :{{item |slice:0:4 }}

管道後面冒號跟隨的就是引數, 也許還有人問如何多重管道呼叫？ ， eg :{{item | slice:0:4 | uppercase}}

這裡看出來了麼，這是使用了資料流的概念，用過linux管道的小夥伴一看就知道了。。item 的輸入資料

給slice處理後再丟給uppercase處理，最終返回的結果集就是切割後並且轉為大寫字元的資料

書寫一個自定義管道

  • Demo寫法

// 自定義管道必須依賴這兩個
import { Pipe, PipeTransform } from '@angular/core';

// 管道裝師符 ， name就是管道名稱
@Pipe({
  name: 'name'
})


export class PipeNamePipe implements PipeTransform {
  // value : 就是傳入的值
  // ...args : 引數集合(用了...擴充符),會把陣列內的值依次作為引數傳入
  // ...args可以改成我們常規的寫法(value:any,start:number,end:number)
  transform(value: any, ...args: any[]): any {

  }
}複製程式碼
  • 實現一個切割字串然後拼接...的管道【用於渲染資料過長擷取】
import { Pipe, PipeTransform } from '@angular/core';


@Pipe({
  name: 'SliceStr'
})
export class SliceStrPipe implements PipeTransform {
  /**
    * 截圖字串字元
    * option(start,end,[+str])
    */
  // start和end及extraStr後面都跟隨了一個問好，代表這個為可選引數而不是必選的
  // 功能就是給出截圖的啟示，然後是否拼接你自定義的字串(...)等
  transform(value: string, start?: number, end?: number, extraStr?: string): string {
    // console.log( value );
    if (value) {
      if (typeof (start) === 'number' && typeof (end) === 'number') {
        if (value.length > end && extraStr && typeof (extraStr) === 'string') {
          // console.log( start, end, extraStr );
          return value.slice(start, end) + extraStr.toString();
        } else {
          return value.slice(start, end);
        }

      } else {
        return value;
      }
    } else {
      return value;
    }

  }
}複製程式碼
  • 上面的效果圖，結合[title]實現資料擷取，懸浮看到完整的資料

區域性程式碼的寫法 --- 這是檢視繫結的使用方法，那若是放在ts裡面如何使用一個管道呢。。且看我道來

  <td [title]="item.SupplierName">{{item.SupplierName | SliceStr:0:13:'...' || '' }}</td>複製程式碼

區域性程式碼的寫法 --- ts內管道處理資料


// 引入日期轉換管道
import { TransDatePipe } from '../../../../../widgets/mit-pipe/TransDate/trans-date.pipe';

// 使用自定義管道處理ts內的資料
const PublishDate: new TransDatePipe().transform(res.Data.PublishDate) || '',複製程式碼

如何使一個自定義管道生效

  • 單一引入生效
// 功能管道
import { SliceStrPipe } from './SliceStr/slice-str.pipe';

@NgModule( {
  imports: [
    CommonModule
  ],
  declarations: [
    SliceStrPipe  // 管道生效必須放到declarations裡面
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})複製程式碼
  • 模組引入

我們這邊，是寫了一組管道，然後放到一個自定義模組裡面，最後匯出

在其他模組引入這個模組就能直接使用了。。

import ..........


const pipe =  [
  IsCitizenIDPipe,
  IsEmailPipe,
  IsEnhancePasswordPipe,
  IsFixedPhonePipe,
  IsLicensePipe,
  IsMobilePhonePipe,
  IsNormalPasswordPipe,
  IsNumberPipe,
  IsUsernamePipe,
  SliceStrPipe,
  TimeDifferencePipe,
  TransDatePipe,
  ThousandSeparationPipe
];

@NgModule( {
  imports: [
    CommonModule
  ],
  declarations: [
    MitPipeComponent,
    ...pipe,
  ],
  exports: [ ...pipe ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class MitPipeModule { }



// ----- 引入module

// 管道 -- 把MitPipeModule丟到imports裡面就行了
import { MitPipeModule } from '../../../../../widgets/mit-pipe/mit-pipe.module';複製程式碼

總結

管道的寫法並不複雜，複雜的是你想要在管道內實現怎麼樣的功能，考慮擴充性，可讀性，複用性！

下一篇扯下自定義指令的~~~~

相關文章