Angular 管道

一、管道优点

（1）可以使用户的体验变得好

（2）可以省去一些重复性的工作

二、管道的常规使用

一般是用于 Mustache 语法（插值语法）的双向数据：
{{ item | json }} // 内置的 JsonPipe 管道
管道带参数

{{ item | slice:0:4 }} // 管道后面冒号跟随的就是参数

多重管道调用

这是使用了 "数据流" 的概念，用过 Linux 管道的小伙伴一看就知道了。

item 的输入数据给 slice 处理后再丢给 uppercase 处理，最终返回的结果集就是切割后并且转为大写字符的数据。

三、自定义管道

// 自定义管道必须依赖 Pipe 和 PipeTransform
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;
    }

  }
}

四、如何使一个自定义管道生效 ★★★

单一引入生效

// 功能管道
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';

转自：https://juejin.im/post/58db5b55128fe1006cdf0bb3

Angular 管道

你可能感兴趣的:(Angular 管道)