Angular 2 + 折腾记 ：(5) 动手实现一个自定义管道

管道这东西，可以让用户的体验变得好，也可以省去我们一些重复性的工作；
官方的内置管道就不解释了。。自行看文档吧复制代码

// 自定义管道必须依赖这两个
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;
    }

  }
}

  <td [title]="item.SupplierName">{{item.SupplierName | SliceStr:0:13:'...' || '' }}</td>复制代码

// 引入日期转换管道
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';